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

插入文本

在绘图的过程中经常需要插入少量文本内容，在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>

运行结果