前端开发工程师知识体系|H5画布 canvas 入门到精通 _ 第二部分(绘制文字、图片、坐标系，canvas颜色和样式，canvas绘制环境) html5|canvas|css|前端

目录
1. 绘制文字
2. 绘制图片(drawImage)
（1）基本绘制方法
（2）案例：序列帧动画
3. 绘制坐标系
4. canvas 颜色样式和阴影
5. 复杂样式
（1）渐变
（2）绘制背景图
（3）变换（重点）
6. 绘制环境的相关操作
1. 绘制文字

ctx.font；设置文本内容的字体属性，使用方式与 css font 相同

ctx.textAlign；设置文本内容的对齐方式

start：默认，文本在指定的位置开始

end：文本在指定的位置结束

center：文本的中心被放置在指定的位置

left：文本左对齐

right：文本右对齐

ctx.textBaseline；设置绘制文本时使用的当前文本基线

alphabetic：默认，文本基线是普通的字母基线

top：文本基线是 em 方框的顶端

hanging：文本基线是悬挂基线

middle：文本基线是 em 方框的正中心

ideographic：文本基线是 em 基线

bottom：文本基线是 em 方框的底端

ctx.fillText()；填充文本

ctx.strokeText()；绘制文本（无填充）

ctx.measureText()；返回包含指定文本宽度的对象

接下来我们在上文饼状图案例的基础上绘制文字：

绘制饼状图&文字

加上文字的饼状图如下：

前端开发工程师知识体系|H5画布 canvas 入门到精通 _ 第二部分(绘制文字、图片、坐标系，canvas颜色和样式，canvas绘制环境)

文章图片

在这里注意我们计算文字文字位置时用到了两个公式：200 为圆心点的位置，cos 计算 x 轴方向的位置，sin 计算 y 轴方向的位置，100 为半径长度，20 是文字到圆周的距离；该公式通用。

x = 200 + Math.cos(txtAngle * Math.PI / 180) * (100 + 20); y = 200 + Math.sin(txtAngle * Math.PI / 180) * (100 + 20);

2. 绘制图片(drawImage) （1）基本绘制方法

ctx.drawImage(img,x,y)；绘制图片基本方式，x y 为绘片左上角的坐标， img是绘制图片的dom对象

ctx.drawImage(img,x,y,width,height)；绘制图片并规定宽高

ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)；绘制图片并在画布上定位被裁剪的部分，sx,sy 裁剪区域的左上角坐标， swidth 裁剪图片的宽度，sheight 裁剪的高度，其余属性相同

如下简单案例：

文章图片

（2）案例：序列帧动画（通过图片裁剪，实现人走路的动态效果）
图片裁剪常用育在一张具有多种元素的图片中裁剪出其中一个元素，例如在一张具有多个人物的图片中抠出其中一个人物等等。接下来我们通过一张人走路的序列帧图来实现动态效果；
原始序列帧图片如下：

文章图片

过程也很简单，就是使用到了循环计时器 setInterval，循环裁剪图片中的每一帧，并清除之前裁剪的所有元素，只展示最新的元素，实现动态效果。

序列帧动画

案例效果如下：

文章图片

3. 绘制坐标系

绘制坐标系

效果如下：

文章图片

4. canvas 颜色样式和阴影（了解）相关颜色样式：

ctx.fillStyle；填充颜色(可支持所有格式的颜色)

ctx.strokeStyle；描边颜色(可支持所有格式的颜色)

ctx.strokeStyle = 'red'; ctx.strokeStyle = '#ccc'; ctx.strokeStyle = 'rgb(255,0,0)'; ctx.strokeStyle = 'rgba(255,0,0,6)';

相关阴影样式（效率低、性能差，建议不使用）：

ctx.shadowColor；阴影颜色

ctx.shadowBlur；模糊级别，大于 1 的正整数，数值越高，模糊程度越大

ctx.shadowOffsetX；阴影距形状的水平距离

ctx.shadowOffsetY；阴影距形状的垂直距离

使用方式与 css 中类似：

ctx.shadowColor = 'teal'; ctx.shadowBlur = 10; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.fillRect(100, 100, 100, 100);

5. 复杂样式（1）渐变

ctx.createLinearGradient(x0,y0,x1,y1)；线性渐变，x0 y0 为起始坐标，x1 y1 为结束坐标，使用时需要添加渐变色

var grd = ctx.createLinearGradient(0, 0, 170, 0); grd.addColorStop(0, 'black'); //添加一个渐变颜色，值介于 0.0 与 1.0 之间 grd.addColorStop(1, 'white'); //添加一个渐变颜色 ctx.fillStyle = grd; //把渐变设置到填充的样式

ctx.createRadialGradient(x0,y0,r0,x1,y1,r1)；圆形渐变，x0 渐变开始圆的 x 坐标，y0 渐变的开始圆的 y 坐标，r0: 开始圆的半径，x1 渐变的结束圆的 x 坐标，y1 渐变的结束圆的 y 坐标，r1 结束圆的半径

var rlg = ctx.createRadialGradient(300, 300, 10, 300, 300, 200); rlg.addColorStop(0, 'teal'); //添加一个渐变颜色 rlg.addColorStop(0.4, 'navy'); rlg.addColorStop(1, 'purple'); ctx.fillStyle = rlg; //设置填充样式为延续渐变的样式 ctx.fillRect(100, 100, 500, 500);

（2）绘制背景图

ctx.createPattern(img,repeat)；img 设置平铺背景的图片，repeat 背景平铺的方式

var ctx = c.getContext('2d'); var img = document.getElementById('lamp'); var pat = ctx.createPattern(img, 'repeat'); ctx.rect(0, 0, 150, 100); ctx.fillStyle = pat; //把背景图设置给填充的样式 ctx.fill();

（3）变换（重点）

ctx.scale(scalewidth,scaleheight)；画布缩放

ctx.translate(x,y)；位移画布，发生位移后，相当于把画布的 0,0 坐标更换到新的 x,y 位置，所有绘制的新元素都被影响

ctx.rotate(angle)；旋转画布

6. 绘制环境的相关操作

ctx.save()；保存当前环境的状态，可以把当前绘制环境进行保存到缓存中

ctx.restore()；返回之前保存过的路径状态和属性

ctx.globalAlpha=number；设置绘制环境的透明度，值介于0-1之间

ctx.clip()；在画布的限定区域绘制，从原始画布中剪切任意形状和尺寸，一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内

canvas.toDataURL(type, encoderOptions)；把 canvas 绘制的内容输出成 base64 内容，type 设置输出的类型，比如 image/png image/jpeg 等；encoderOptions 值为 0-1 之间的数字，用于标识输出图片的质量，1 表示无损压缩

var canvas = document.getElementById("canvas"); var dataURL = canvas.toDataURL(); console.log(dataURL); var img = document.querySelector("#img-demo"); //拿到图片的dom对象 img.src = https://www.it610.com/article/canvas.toDataURL("image/png"); //将画布的内容给图片标签显示

三篇文章速通 canvas：
【前端开发工程师知识体系|H5画布 canvas 入门到精通 _ 第二部分(绘制文字、图片、坐标系，canvas颜色和样式，canvas绘制环境)】?? 第一部分：canvas介绍，绘制圆形、矩形；
?? 第二部分：绘制文字、图片、坐标系，canva颜色和样式，绘制环境；
?? 第三部分：canvas库Konva.js的使用。