Canvas 保姆级教程（上）：绘制篇

元素可被用来通过 JavaScript（ Canvas API 或 WebGL API ）绘制图形及图形动画，也就是说 标签只是一个图形容器。Canvas 可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于 2D 图形。而 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

标签只有两个属性—— width 和 height，当没有设置宽度和高度的时候， 会初始化宽度为 300px 和高度为 150px。

需要注意的是， 通过 CSS 也可以定义 canvas 的尺寸，但此元素尺寸非彼画布尺寸，在绘制时图像会伸缩以适应它的画布尺寸；如果元素尺寸和画布尺寸比例不一样，绘制出来的图像是扭曲的。

只有同时通过 CSS 指定了 width 和 height，才会出现比例不一致，如果只定义 width: 400px，你会发现高度会自动变成 200px。

比如，尺寸比例不一致时会出现下面这个变形的圆：

此时的画布尺寸依旧是初始值（w:300px, h:150px）。

元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。

canvas 起初是空白的，脚本首先需要找到渲染上下文，然后在它的上面绘制。getContext()，这个方法是用来获得渲染上下文和它的绘画功能。

上下文类型（contextType）

上下文属性（contextAttributes）

2d

webgl

alpha: 布尔值，表明 canvas 包含一个 alpha 通道。

antialias: 布尔值，表明是否开启抗锯齿。

depth: 布尔值，表明绘制缓冲区包含一个深度至少为 16 位的缓冲区。

failIfMajorPerformanceCaveat: 布尔值，表明在一个系统性能低的环境是否创建该上下文。

powerPreference: 指示浏览器在运行 WebGL 上下文时使用相应的 GPU 电源配置。 可能值如下:

default: 自动选择，默认值。

high-performance: 高性能模式。

low-power: 节能模式。

premultipliedAlpha: 布尔值，表明排版引擎将假设绘制缓冲区包含预混合 alpha 通道。

preserveDrawingBuffer: 布尔值，是否保存缓冲区，直到被清除或被使用者覆盖。

stencil: 布尔值，表明绘制缓冲区包含一个深度至少为 8 位的模版缓冲区。

在例子中绘制了两个有趣的长方形，其中的一个有着 alpha 透明度。

在我们开始画图之前，我们先了解一下 canvas 的坐标体系（x,y）。canvas 是一个二维网格，原点 (0,0) 在左上角，所有元素的位置都相对于原点定位取正数。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，它的坐标就是 (x,y)：

只支持两种形式的图形绘制：矩形 和 路径（由一系列点连成的线段）。

提供了三种方法绘制矩形，矩形的左上角为(x,y)，：

绘制一个填充的矩形，填充色为当前的 fillStyle。

我们可以用 fillRect() 在开始绘制内容前，设置一个背景：

绘制一个矩形的边框，边框色为当前的 strokeStyle。

这个方法通过把像素设置为透明，以达到擦除一个矩形区域的效果。

请确保在调用 clearRect() 之后绘制新内容前调用 beginPath() 。

我们可以用 clearRect 清除整个画布：

路径就像是画家手中的画笔，通过一笔一画的组合（路径列表）可以绘制出复杂而丰富的图形。

使用路径绘制图形的步骤：

这个方法完成的事情，可以想象成你在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。

我们可以用 moveTo 函数：

这个方法是用来 绘制直线 的，绘制一条从当前位置到指定坐标 (x,y) 的直线。

当前位置由 之前路径的结束点 或者 moveTo() 决定。

我们结合 moveTo()，来绘制两个三角形，填充的和描边的。

绘制圆弧或者圆，可以选择 arc() 或者 arcTo()。两个方法的绘制思路是不一样的，我们通常选择 arc()，因为更可控。

绘制的过程：

注意，startAngle 和 endAngle 的单位是弧度，而不是角度。 弧度 = ( Math.PI / 180 ) * 角度

我们来画个“月有阴晴月缺”：

绘制过程：

绘制一个左上角坐标为 (x,y)，宽高为 width 以及 height 的矩形。

在该方法执行前，当前笔触自动重置回默认坐标，即 moveTo(0,0)；该方法结束后的笔触停留在矩形左上角 (x,y)。

二次及三次贝塞尔曲线，一般用来绘制复杂有规律的图形。

因为贝塞尔曲线构建的图形很难想象，所以分享一个在线调试工具：

quadraticCurveTo(cp1x, cp1y, x, y)

绘制二次贝塞尔曲线，当前位置为开始点（蓝点），(cp1x,cp1y) 为一个控制点（红点），(x,y) 为结束点（蓝点）。

渲染对话气泡：

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

绘制三次贝塞尔曲线，当前位置为开始点（蓝点，）(cp1x,cp1y) 为控制点 1（红点），(cp2x,cp2y) 为控制点 2（红点），(x,y) 为结束点（蓝点）。

绘制一颗心心：

Path2D 可以用缓存或记录绘画命令，就像是把某一段路径抽成一个函数用于复用，这样做也简化了代码和提高了性能。

以上介绍的所有路径方法，在 Path2D 中都可以用，比如 moveTo, rect, arc 或 quadraticCurveTo 等。

返回一个新初始化的 Path2D 对象，可能是某一个路径，或者包含 SVG path 数据的字符串。

Path2D API 有另一个强大的功能，可以使用 SVG path data 来初始化 canvas 上的路径，这意味着可以将 SVG 搬上 canvas。

解读一下这一条 SVG path -- "M10 10 h 80 v 80 h -80 Z"：

没错，最终绘制除了一个矩形：

addPath 可以将 path 结合起来（添加一条路径到当前路径），这很适用从几个元素中来创建对象。

我们想为图形添加样式和颜色，可以用上这两个属性：

它俩儿的默认值都是黑色（#000000），接受色值、渐变对象和图案对象。

关于色值的内容比较简单，和我们在 CSS 中指定颜色也差不多：

在 canvas 中，渐变对象和图案对象是有自己套路的。

也是用 线性 或者 径向 的两种渐变形式来新建一个 canvasGradient 对象，并且赋给图形的 fillStyle 或 strokeStyle 属性。

创建出 canvasGradient 对象后，用 addColorStop 方法给它上色：

一个简单的线性黑白渐变例子：

一个径向渐变小彩球的例子：

让起点稍微偏离终点，这样可以达到一种球状 3D 效果。在球体的边缘处，使用同色值透明度过渡会柔和一些。

图案的应用跟渐变很类似的，创建出一个 pattern 之后，赋给 fillStyle 或 strokeStyle 属性即可。

注意： 与 drawImage 有点不同，你需要确认 image 对象已经装载完毕，否则图案可能效果不对的。

设置当前绘线的粗细。默认值是 1.0，必须为正数。

绘制十条宽度从 1.0 到 10.0 的线：

因为线宽是指给定路径的中心到两边的粗细，所以在绘制过程中会在路径的两边各绘制线宽的一半。也正是因为这个规则，当我们的路径 Y 轴落在网格上时（像下图 2），两边的实际填充区域只占网格的一半，实际渲染中 canvas 会以实际笔触颜色一半色调的颜色来填充整个区域，所以，最左边的以及所有宽度为奇数的线并不能精确呈现。

所以在默认情况下，我们想要获得精确的线条，就要让奇数宽度的中心落在网格中心，偶数宽度的中心落在网格线上。在操作缩放时，这也是不可忽略的一点。

决定了线段端点显示的样子。它的取值如下图所示，从左到右分别是 butt（默认）、round、square。

决定了图形中两线段连接处所显示的样子。它的取值如下图所示，从下往上分别是 miter（默认）、bevel、round。其中 miter 的延伸效果会收到 miterLimit 的约束，也就是下面这个属性。

想象上图中的两线之间的夹角无限变小，那么外延交点也会无限变远。

miterLimit 属性就是用来设定外延交点与连接点的最大距离（默认为 10.0），如果交点距离大于此值，连接效果会变成了 bevel。

在填充线时使用虚线模式。

提示：如果要切换回至实线模式，将 segments 设置为一个空数组即可。

一些常见的虚线模式：

lineDashOffset 可以设置虚线的偏移量，默认值为 0.0。

利用这个偏移量，我们可以让虚线“动起来”，俗称“蚂蚁线”。

getLineDash()，是获取当前线段样式的方法。返回值是一个描述线段和间隔的数组。如果数组元素的数量是奇数，数组元素会被复制并重复。

在 canvas 中，可以通过给 fill（或者 clip 和 isPointinPath ）传参指定填充规则，默认为 nonzero：

那么，什么是填充规则呢？

只要是路径填充，都有两种规则 -- nonzero 和 evenodd，无论是 SVG 中的路径填充，还是 Canvas 中的路径填充。

两组路径的差异体现在交叉点的处理上，也就是说如果只是一个三角形，是看不出区别的：

如果是两个发生重叠的三角形，产生了交叉点，也产生了差异：

“奇偶规则” -- 计算交叉路径数量，计算结果是奇数，就填充；计算结果是偶数，就不填充。

比如我们在下图取一点 A，向任意方向发出一条射线（天蓝色），找到和射线发生交叉的路径，是路径 5 和路径 2，计算结果是偶数，所以不填充。

“非零规则” -- 计算顺时针逆时针数量，计算结果不是 0，就填充；计算结果是 0，就不填充。

比如我们在下图取一点 B，向任意方向发出一条射线（天蓝色），找到那些和射线发生交叉的路径：

计算结果是 0，所以不填充。

canvas 提供了两种方法来渲染文本：

fillText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。

strokeText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。

描述当前字体样式，取值和 CSS 中的 font 属性一样，默认字体是 10px sans-serif。

描述了文本水平方向的对齐方式，默认值是 start，取值如下：

以下 x 和 y，是在 fillText/strokeText 的时候所给的。

"left"，文本左对齐。

"right"，文本右对齐。

"center"，文本居中对齐。

"start"，文本对齐界线开始的地方。

"end"，文本对齐界线结束的地方。

direction 属性会对此属性产生影响：

描述了当前文本基线，即文字垂直方向的对齐方式，默认值是 alphabetic，取值如下：

描述了当前文本方向。

measureText 方法将返回一个 TextMetrics 对象，只包含部分能体现文本特性的属性（宽度、所在像素）：

引入图像到 canvas 的步骤只需要两步：

canvas 支持的图片源类型：

HTMLImageElement：

HTMLVideoElement： canvas 会绘制当前视频帧，我们可以搭配 video 事件使用，比如下面的例子：

HTMLCanvasElement： 一个常用的应用就是将第二个 canvas 作为第一个 canvas 的缩略图：

ImageBitmap：高性能的位图，可以低延迟地绘制，它运用 createImageBitmap() 工厂方法模式，它可以从多种源中生成。

获得图片对象后，我们通过 drawImage 方法将它渲染到 canvas 里。drawImage 参数有三种情况：三个参数，五个参数，九个参数。

save() 和 restore()，这两个方法是简单绘制和复杂绘制的一条分界线，可以帮我们省下不少的重复劳动。

画布的状态被保存在一个栈中，一个绘画状态包括：

变形是一种更强大的方法，它可以移动原点、对网格进行旋转和缩放。

移动 canvas 和它的原点到一个不同的位置。

x 是左右偏移量，y 是上下偏移量，如下图所示：

以原点为中心旋转 canvas。

angle 取正时，顺时针旋转；angle 取负时，逆时针旋转。以弧度为单位的值。

对形状，位图进行缩小或者放大，即增减图形在 canvas 中的像素数目。

对变形矩阵直接修改。

基础用法

重置矩阵 重置当前变形为单位矩阵，等同于 ctx.setTransform(1, 0, 0, 1, 0, 0);

重置并修改矩阵 将当前的变形矩阵重置为单位矩阵，然后用相同的参数调用 transform 方法。

globalCompositeOperation 提供了 12 种合成图形的方式：

其中，destination-in的遮盖方式，可以用于实现抠图效果（只显示涂抹区域）。

clip() 方法其实是绘制图形（stroke()，fill()）的第三个进阶方法，clip() 会将当前正在构建的路径转换为当前的裁剪路径，所有在路径以外的部分都会被隐藏。

默认情况下，canvas 有一个与它自身一样大的裁切路径（也就是没有裁切效果）。

我们来画一个星空，用一个圆形的裁切路径来限制随机星星的绘制区域：