当前位置：首页 > 资讯 > 系统环境 > windows

《JS原理、方法与实践》- canvas作图（四）- 插入文本和图片

时间：2021-03-20 20:48 作者：张中华来源：阅读：449
扫一扫，手机访问

摘要：插入文本在绘图的过程中经常需要插入少量文本内容，在CanvasRenderingContext2D中可以使用下面的方法来插入：fillText(text,x,y[,maxWidth]):实心文本strokeText(text,x,y[,maxWidth]):空心wenb相关属性：font: 字体te

插入文本

在绘图的过程中经常需要插入少量文本内容，在CanvasRenderingContext2D中可以使用下面的方法来插入：

fillText(text,x,y[,maxWidth]):实心文本
strokeText(text,x,y[,maxWidth]):空心wenb
相关属性：
font: 字体
textAlign：排列方式,可选值[start, end, left, right, center]
direction: 文本方向
textBaseline: 文本的基线，汉字用不到，值为top,hanging,middle,alphabetic,ideographic,bottom.

实例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    <canvas id="c2d">浏览器不支持canvas</canvas>    <script>        const canvas = document.querySelector('#c2d');        if(canvas.getContext) {            const ctx = canvas.getContext('2d');                        ctx.font='28px 行楷';            ctx.fillText('爱我中华', 10, 50);            ctx.font = '38px 宋体';            ctx.strokeText('中国加油', 10, 100);        }    </script></body></html>

运行结果

插入图片

在CanvasRenderingContext2D中可以插入图片，使用drawImage方法，有以下三种调用方式：

drawImage(image, x, y)
指定图片绘制位置的左上角
drawImage(image,x,y,width,height)
指定绘制后的宽和高，这个方法可能会产生变形
drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)
可以截取原图的一部分绘制到当前canvas中，并且可以进行缩放，它的后8个参数中的前4个表示在原图中要截获得位置，sx,sy为截取的左上角的位置，sWidth和sHeight为截取的宽度和高度，后4个参数表示在当前canvas中绘制的位置，dx，dy为绘制的左上角，dWidth和dHeight为绘制的宽度和高度。

参数中，image为CanvasImageSource类型，可以是html中的img节点、video节点、canvas节点或者者Canvas'RenderingContext2D对象。

实例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    <canvas id="c2d" width="800" height="800">浏览器不支持canvas</canvas>    <img id="pic" src="./img/Pic2.png" hidden="true">    <script>        window.onload = function () {            const canvas = document.querySelector('#c2d');            if (canvas.getContext) {                const ctx = canvas.getContext('2d');                const pic = document.getElementById('pic');                ctx.drawImage(pic, 0, 0, 100, 100);                ctx.drawImage(pic, 50, 50, 100, 100);                ctx.drawImage(pic, 100, 100, 100, 100);            }        }    </script></body></html>

运行结果

全部评论(0)

上一篇：牛笔了！字节跳动大佬整理：CSS 核心知识（万字长文，值得收藏！）
下一篇：为什么那么多自学编程的人都半途而废？

dedecms织梦模板店

店铺

推荐商品