Oh-My-NoteCanvas
基本概念
Canvas 是用过 HTML 的<canvas>元素和 JavaScript来绘制图形（主要是位图）的 API。
他可以用于：
- 动画
- 游戏画面
- 数据可视化
- 图片编辑
- 实时视频处理等
Canvas API主要用于 2D图形，不同于WebGL，虽然他们都用<canvas>元素，但WebGL主要用于绘制2D 和3D 图形。
一个简单的例子：
html1<style> 2 #canvas { 3 border: 1px solid red; 4 } 5</style> 6<body> 7 <canvas id="canvas"></canvas> 8 9 <script> 10 let canvas = document.getElementById('canvas') 11 const ctx = canvas.getContext('2d') 12 ctx.fillStyle = 'green' 13 ctx.fillRect(0, 0, 150, 100) 14 </script> 15</body>
API 解释：
canvas.getContext("2d")获取这个元素的context，图像通过上下文来绘制。
2d 表示实际的绘制通过CanvasRenderingContext2D来完成。
当前使用的是fillStyle来填充颜色，fillRect用来绘制矩形，这个 API将绘制的图像的左上角放在canvas的(0,0)位置，图像的大小为宽 150，高 100。
每个canvas的默认大小为 300*150，上面的代码会绘制出以下图形
canvas 元素
如果需要使用 canvas，我们需要创建画布——这就是<canvas>标签。
<canvas>标签只有两个attribute属性——width 和 height。也可以使用 CSS 定义大小，但是绘制时图像会伸缩以适应它的框架尺寸，有时候会引发扭曲，所以我们需要用width和height来明确宽高。
<canvas>元素可以设置样式，如果没有规定规则时，会完全变成透明。
如果在里面放一些内容，那么浏览器会将其忽略。
比如下面的代码，在<canvas>加了一些文字，那么支持<canvas>的浏览器会忽略里面的内容，而只是渲染 canvas
html1<canvas id="canvas"> 支持canvas 的浏览器会忽略这些文字</canvas>
渲染上下文（rendering context）
<canvas>元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。我们主要使用2d渲染上下文。
原先<canvas>是空白的，我们需要用 JavaScript获取context，然后在上面绘制。获取渲染上下文的 API 是getContext()方法。
js1var ctx = canvas.getContext('2d')
一般我们需要通过getContext来判断浏览器是不是支持<canvas>标签。
js1var canvas = document.getElementById('tutorial') 2 3if (canvas.getContext) { 4 var ctx = canvas.getContext('2d') 5 // drawing code here 6} else { 7 // canvas-unsupported code here 8}
获取了上下文之后，我们可以用来绘制图形了。但在绘制图形之前，我们需要知道图形会画到画布的哪个位置。
canvas 栅格可以抽象表示画布的坐标和网格。
canvas 栅格
每一个 canvas 都是带有栅格的画布，里面有坐标和各种网格。通常来说网格中的一个单元相当于 canvas 元素中的一像素。
栅格的起点是左上角(0,0)。所有元素的位置都相对于原点定位。
图中蓝色的坐标为距离左边 x 像素，距离顶部 y 像素，坐标为(x,y)。
绘制步骤
<canvas>只支持两种形式的图形绘制：矩形和路径，路径指的是由一个系列点连成的线段。
图形的基本元素是路径，路径是由不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
一个路径是闭合的，使用路径绘制图形需要一些额外的步骤。
- 创建路径起始点
- 使用画图命令画路径
- 闭合路径
- 一旦路径生成，就只能通过描边或填充路径区域来渲染图形
对应的 API 如下：
beginPath()新建路径，生成后，图形绘制命令被指向到路径上生成路径closePath()闭合路径之后图形绘制命令又被重新指向到上下文中stroke()通过线条来绘制图形轮廓，就是描边fill()通过填充路径的内容区域来生成实心图形，就是填充路径
生成路径的第一步叫做beginPath，实质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形等）构成图形。每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。
当调用beginPath后，第一条路径构造命令通常是moveTo()。因为我们需要专门指定起始位置。
第二步就是调用函数来指定绘制路径。
第三，就是闭合路径closePath(),这个方法不是必需要写的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形已经闭合，那么什么都不做。
当调用
fill函数时,所有没有闭合的形状都会自动闭合，所以我们不需要调用closePath函数。但是调用stroke不会自动闭合。
moveTo 移动笔触
moveTo函数就类似在纸上将一支笔的笔尖从一个点移动到另一个点。然后以这个点为原点，开始绘制路径、描边等等。
通常在调用beginPath后，就需要移动笔触。
每次画完一个东西后，我们就需要移动笔触到新的地方来时描绘。
下面的代码可以画一个笑脸
js1function draw() { 2 var canvas = document.getElementById('canvas') 3 if (canvas.getContext) { 4 var ctx = canvas.getContext('2d') 5 6 ctx.beginPath() 7 ctx.arc(75, 75, 50, 0, Math.PI * 2, true) // 绘制最外层的圆 8 ctx.moveTo(110, 75) // 移动笔触到 110,75 的位置 9 ctx.arc(75, 75, 35, 0, Math.PI, false) // 口(顺时针) 10 ctx.moveTo(65, 65) 11 ctx.arc(60, 65, 5, 0, Math.PI * 2, true) // 左眼 12 ctx.moveTo(95, 65) 13 ctx.arc(90, 65, 5, 0, Math.PI * 2, true) // 右眼 14 ctx.stroke() 15 } 16} 17draw()
moveTo 绘制的路径在实际图中我们看不到，以下用红色的路径将moveTo给画出来。
绘制形状
lineTo 绘制直线
lineTo(x,y)
绘制一条从当前位置到指定 x 以及 y 位置的直线。
该方法有两个参数：x 以及 y ，代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，等等。。。开始点也可以通过moveTo()函数改变。
js1function draw() { 2 var canvas = document.getElementById('canvas') 3 if (canvas.getContext) { 4 var ctx = canvas.getContext('2d') 5 // 绘制填充三角形 6 ctx.beginPath() 7 ctx.moveTo(25, 25) 8 ctx.lineTo(105, 25) 9 ctx.lineTo(25, 105) 10 ctx.fill() 11 // 绘制描边三角形 12 ctx.beginPath() 13 ctx.moveTo(125, 125) 14 ctx.lineTo(125, 45) 15 ctx.lineTo(45, 125) 16 ctx.closePath() 17 ctx.stroke() 18 } 19} 20draw()
上面的代码用lineTo绘制了路径，然后用stroke或者fill来渲染了路径，产生了两个不同的三角形。
由于fill会自动填充三角形，所以我们并不需要调用closePath来闭合它。但是stroke则需要closePath。
绘制矩形
绘制矩形可以使用三个语法糖方法：
fillRect(x,y,width,height)绘制一个填充的矩形strokeRect(x,y,width,height)绘制一个矩形的边框clearRect(x,y,width,height)清除指定矩形区域，让清除部分完全透明
所有方法的参数都是一致的：
x和y是指定了在 canvas 画布上所绘制矩形的左上角的坐标。width 和height设置矩形的尺寸。
js1function drawn() { 2 let canvas = document.getElementById('canvas') 3 if (canvas.getContext) { 4 const ctx = canvas.getContext('2d') 5 ctx.fillRect(25, 25, 100, 100) 6 ctx.clearRect(45, 45, 60, 60) 7 ctx.strokeRect(50, 50, 50, 50) 8 } 9}
fillRect绘制了边长为 100 的黑色正方形
clearRect从正方形的中心开始擦除一个 60*60 的正方形
strokeRect在清除区域内生成一个 50*50 的正方形边框
最终效果：
以上三种画矩形的方法都是基于rect方法来实现的语法糖：
rect(x, y, width, height)
绘制一个左上角坐标为（x,y），宽高为 width 以及 height 的矩形。
当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。也就是说，当前笔触自动重置回默认坐标。
这个方式需要手动调用stroke或者fill方法来渲染路径，相当于
fillRect = rect + fill
strokeRect = rect + stroke
js1function draw() { 2 var canvas = document.getElementById('canvas') 3 if (canvas.getContext) { 4 const ctx = canvas.getContext('2d') 5 ctx.rect(25, 25, 100, 100) 6 ctx.stroke() 7 } 8}
画多个图形
js1 <script> 2 function drawn() { 3 let canvas = document.getElementById("canvas"); 4 if (canvas.getContext) { 5 const ctx = canvas.getContext("2d"); 6 ctx.fillStyle = "green"; 7 ctx.fillRect(10, 10, 150, 100); 8 9 ctx.fillStyle = "red"; 10 ctx.fillRect(30, 30, 150, 100); 11 } 12 } 13 drawn(); 14 </script>
上面的代码会渲染出以下图形：
所有其他类型的图形都是通过一条或者多条路径组合而成的。
绘制三角形
html1<body> 2 <canvas id="canvas"></canvas> 3 <script> 4 function draw() { 5 var canvas = document.getElementById('canvas') 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d') 8 9 ctx.beginPath() 10 ctx.moveTo(75, 50) // 设置 canvas 内x 轴为 75，y 轴 50 的起点 11 ctx.lineTo(100, 75) // 从起点往x 轴为 100，y 轴为 75 的地方绘制路径 12 ctx.lineTo(100, 25) // 从上面的位置到x 轴为 100，y 轴为 25 的地方绘制路径 13 ctx.closePath() // 关闭路径，从现在的点回到起始点 14 ctx.stroke() // 绘制路径 15 } 16 } 17 draw() 18 </script> 19</body>
只有调用了stroke之后才会给路径渲染轮廓，否则只是把路径给绘制出来了，对视觉来说是透明的。
arc 绘制圆弧
如果要画圆或者圆弧，我们使用arc方法。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
这个 API 的意思是以(x,y)为圆心的以 radius 为半径的，从startAngle开始到endAngle结束，按照anticlockwise给定的方法（默认为顺时针）来生成。
startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以 x 轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
弧度的计算：0 到Math.PI是半圆，0 到Math.PI * 2是全圆。
绘制一个圆的代码是：
js1function draw() { 2 var canvas = document.getElementById('canvas') 3 if (canvas.getContext) { 4 var ctx = canvas.getContext('2d') 5 6 ctx.beginPath() 7 ctx.arc(55, 55, 50, 0, Math.PI * 2, true) // 绘制最外层的圆 8 ctx.stroke() 9 10 ctx.beginPath() 11 ctx.arc(95, 95, 50, 0, Math.PI * 2, true) // 绘制最外层的圆 12 ctx.fill() 13 } 14} 15draw()
贝塞尔曲线
贝塞尔曲线可以描绘比较复杂的图形，有二次贝塞尔和三次贝塞尔曲线。
quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
二次贝塞尔曲线有一个开始点（蓝色）、一个结束点（蓝色）以及一个控制点（红色），而三次贝塞尔曲线有两个控制点。
参数 x、y 在这两个方法中都是结束点坐标。cp1x,cp1y为坐标中的第一个控制点，cp2x,cp2y为坐标中的第二个控制点。
使用二次以及三次贝塞尔曲线是有一定的难度的，因为不同于像 Adobe Illustrators 这样的矢量软件，我们所绘制的曲线没有给我们提供直接的视觉反馈。这让绘制复杂的图形变得十分困难。
下面直接贴例子吧：
多个二次贝塞尔曲线来渲染对话气泡。
js1function draw() { 2 var canvas = document.getElementById('canvas') 3 if (canvas.getContext) { 4 var ctx = canvas.getContext('2d') 5 6 // 二次贝塞尔曲线 7 ctx.beginPath() 8 ctx.moveTo(75, 25) 9 ctx.quadraticCurveTo(25, 25, 25, 62.5) 10 ctx.quadraticCurveTo(25, 100, 50, 100) 11 ctx.quadraticCurveTo(50, 120, 30, 125) 12 ctx.quadraticCurveTo(60, 120, 65, 100) 13 ctx.quadraticCurveTo(125, 100, 125, 62.5) 14 ctx.quadraticCurveTo(125, 25, 75, 25) 15 ctx.stroke() 16 } 17}
三次贝塞尔曲线画心
js1function draw() { 2 var canvas = document.getElementById('canvas') 3 if (canvas.getContext) { 4 var ctx = canvas.getContext('2d') 5 6 //三次贝塞尔曲线 7 ctx.beginPath() 8 ctx.moveTo(75, 40) 9 ctx.bezierCurveTo(75, 37, 70, 25, 50, 25) 10 ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5) 11 ctx.bezierCurveTo(20, 80, 40, 102, 75, 120) 12 ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5) 13 ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25) 14 ctx.bezierCurveTo(85, 25, 75, 37, 75, 40) 15 ctx.fill() 16 } 17}
Path2D 对象
Path2D()会返回一个新初始化的 Path2D 对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含 SVG path 数据的字符串作为变量）。
js1new Path2D() // 空的Path对象 2new Path2D(path) // 克隆Path对象 3new Path2D(d) // 从SVG建立Path对象
所有的路径方法比如moveTo, rect, arc或quadraticCurveTo等,都可以在 Path2D 中使用。
Path2D API 添加了 addPath作为将path结合起来的方法。当你想要从几个元素中来创建对象时，这将会很实用。
js1Path2D.addPath(path[,transform]) 2添加一条路径到当前路径。
html1<body> 2 <canvas width="300" height="300"></canvas> 3 <script> 4 const canvas = document.querySelector('canvas') 5 function draw() { 6 let ctx = canvas.getContext('2d') 7 8 // 用一个 Path2D将绘制矩形的路径保存起来 9 var rectangle = new Path2D() 10 rectangle.rect(10, 10, 50, 50) 11 // 用一个 Path2D将绘制圆形的路径保存起来 12 var circle = new Path2D() 13 circle.moveTo(125, 35) 14 circle.arc(100, 35, 25, 0, 2 * Math.PI) 15 //ctx.fill和 ctx.stroke传入 Path2D进行绘制 16 ctx.stroke(rectangle) 17 ctx.fill(circle) 18 } 19 if (canvas.getContext) { 20 draw() 21 } 22 </script> 23</body>
上面的代码是用 Path2D 对象来保存绘制出来的矩形和圆形，最后用 stroke 或者 fill 来把对象绘制在画布上。
Path2D 对象还可以将 SVG paths 绘制到画布上。
js1var strokeSvg = new Path2D('M10 10 h 80 v 80 h -80 Z') 2var fillSvg = new Path2D('M10 10 h 80 v 80 h -80 Z') 3 4ctx.stroke(strokeSvg) 5ctx.fill(fillSvg)
绘制样式
画颜色
给图形上色需要用到两个 api：
- fillStyle 填充颜色——相当于 background-color
- strokeStyle 线条颜色——相当于 border-color
默认情况下线条或填充颜色都是黑色。
一旦您设置了
strokeStyle或者fillStyle的值，那么这个新值就会成为新绘制的图形的默认值。
颜色只要符合 css 标准即可，也就是说，我们可以用以下形式的字符串：
rgba(x,x,x,x,1)rgb(x,x,x)##FFA500orange
示例：绘制一个填充背景颜色的格子
js1function draw() { 2 let ctx = canvas.getContext('2d') 3 if (canvas.getContext) { 4 ctx.fillStyle = 'rgba(0,255,70,1)' 5 ctx.fillRect(10, 10, 20, 20) 6 } 7}
用两层 for 循环绘制出颜色板
js1function draw() { 2 let ctx = canvas.getContext('2d') 3 if (canvas.getContext) { 4 for (let i = 0; i < 6; i++) { 5 for (let j = 0; j < 6; j++) { 6 ctx.fillStyle = `rgb(0,${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)})` 7 ctx.fillRect(20 * i, 20 * j, 20, 20) 8 } 9 } 10 } 11}
透明度
透明度用两种方法可以实现，一种是使用rgba()实现，另外一种是通过 canvas 提供的globalAlpha来实现。
js1function draw() { 2 let ctx = canvas.getContext('2d') 3 let colors = ['red', 'green', 'rgba(200,200,200,0.5)', 'rgba(100,100,100,0.3)'] 4 if (canvas.getContext) { 5 // 画正方形 6 ctx.fillStyle = colors[0] 7 ctx.fillRect(0, 0, 100, 100) 8 ctx.fillStyle = colors[1] 9 ctx.fillRect(100, 0, 100, 100) 10 ctx.fillStyle = colors[2] 11 ctx.fillRect(0, 100, 100, 100) 12 ctx.fillStyle = colors[3] 13 ctx.fillRect(100, 100, 100, 100) 14 15 // 画圆形 16 ctx.beginPath() 17 // 用 globalAlpha 设置透明度 18 ctx.globalAlpha = 0.5 19 ctx.fillStyle = 'orange' 20 ctx.arc(100, 100, 50, 0, Math.PI * 2, true) 21 ctx.fill() 22 } 23}
线型样式
lineWidth 线条宽度
lineCap 线条末端样式
lineJoin 线条
miterLimit 限制当两条线相交时交接处的最大长度
getLineDash 获取当前虚线的样式
setLineDash 设置当前虚线的样式
lineDashOffset 设置虚线样式的起始偏移量
lineWidth 线宽
lineWidth 能够控制线条的粗细，默认是 1。
js1function draw() { 2 let ctx = canvas.getContext('2d') 3 if (canvas.getContext) { 4 ctx.lineWidth = 10 5 ctx.beginPath() 6 ctx.moveTo(10, 10) 7 ctx.lineTo(10, 100) 8 ctx.stroke() 9 } 10}
以上代码设置了一个宽为 10 的线条。
线宽是指给定路径的中心到两边的粗细，换句话说，会在路线的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。
下面是一个例子，由于路径的定位问题，最左边的以及所有宽度为奇数的线并不能精确呈现：
js1function draw() { 2 var ctx = document.getElementById('canvas').getContext('2d') 3 for (var i = 0; i < 10; i++) { 4 ctx.lineWidth = 1 + i 5 ctx.beginPath() 6 ctx.moveTo(5 + i * 14, 5) 7 ctx.lineTo(5 + i * 14, 140) 8 ctx.stroke() 9 } 10}
想要获取精确的线条，必须知道线条是如何被描绘出来的。我们用网格来替代 canvas 的坐标格，每一个都是一个像素点。
在第一幅图中，矩阵的线刚好填充了(2,1)到(5,5)，区域的边界刚好落在像素边缘上，这样就可以得到清晰的矩阵。
而如果我们想要画一根线，这根线的线条路径在(3,1)到(3,5),我们就可以得到图 2 的结果，深蓝色的填充区域仅仅延伸到路径两旁各一半像素。这一半像素仅仅是部分着色，结果就是以实际笔触颜色一半色调的颜色来填充整个区域（浅蓝和深蓝的部分）。这就是上例中为何宽度为 1.0 的线并不准确的原因。
如果想要解决这个问题，就需要必须对路径施以更加精确的控制。已知粗 1.0 的线条会在路径两边各延伸半像素，那么像第三幅图那样绘制从 (3.5,1) 到 (3.5,5) 的线条，其边缘正好落在像素边界，填充出来就是准确的宽为 1.0 的线条。
上面竖条的 Y 轴刚好落在对应的网格线上，否则也会出现跟 X 轴一样的问题。但是 Y 轴的这个问题可以通过设置
lineCap:square来解决。通过设置成square可以让线条末端的样式得到扩展，这样就能够完全覆盖整个像素格。
lineCap 线条末端样式
属性 lineCap 的值决定了线段端点显示的样子。它可以为下面的三种的其中之一：butt，round 和 square。默认是 butt。
下面的例子绘制了三条直线，分别赋予不同的 lineCap 值，为了刚好看到他们的区别，还有两根辅助线。
js1function draw() { 2 let ctx = canvas.getContext('2d') 3 if (canvas.getContext) { 4 // 绘制辅助线 5 ctx.beginPath() 6 ctx.strokeStyle = 'red' 7 ctx.moveTo(10, 10) 8 ctx.lineTo(140, 10) 9 ctx.stroke() 10 ctx.moveTo(10, 140) 11 ctx.lineTo(140, 140) 12 ctx.stroke() 13 14 const lineCap = ['butt', 'round', 'square'] 15 ctx.lineWidth = 10 16 ctx.strokeStyle = 'black' 17 for (let i = 0; i < lineCap.length; i++) { 18 ctx.beginPath() 19 ctx.lineCap = lineCap[i] 20 ctx.moveTo(20 + 50 * i, 10) 21 ctx.lineTo(20 + 50 * i, 140) 22 ctx.stroke() 23 } 24 } 25}
最左边的线用了默认的 butt 。可以注意到它是与辅助线齐平的。中间的是 round 的效果，端点处加上了半径为一半线宽的半圆。右边的是 square 的效果，端点处加上了等宽且高度为一半线宽的方块。
绘制文本
canvas 提供两种方法来绘制文本
- fillText(text,x,y[,maxWidth]) —— 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
- strokeText(text,x,y[,maxWidth]) —— 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.
fillText示例：
js1function draw() { 2 var ctx = document.getElementById('canvas').getContext('2d') 3 ctx.font = '48px serif' 4 ctx.fillText('Hello world', 10, 50) 5}
strokeText示例：
js1function draw() { 2 var ctx = document.getElementById('canvas').getContext('2d') 3 ctx.font = '48px serif' 4 ctx.strokeText('Hello world', 10, 50) 5}
文本样式：
- font —— 当前我们用来绘制文本的样式
- textAlign —— 文本对齐选项. 可选的值包括：
start,end,left,rightorcenter. 默认值是start。 - textBaseline —— 基线对齐选项. 可选的值包括：
top,hanging,middle,alphabetic,ideographic,bottom。默认值是alphabetic。 - direction —— 文本方向。可能的值包括：
ltr,rtl,inherit。默认值是inherit。
测量文本宽度
当你需要获得更多的文本细节时，下面的方法可以给你测量文本的方法。
-
将返回一个
TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。
下面的代码段将展示如何测量文本来获得它的宽度：
js1function draw() { 2 var ctx = document.getElementById('canvas').getContext('2d') 3 var text = ctx.measureText('foo') // TextMetrics object 4 text.width // 16; 5}
操作图片
canvas 更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。
引入图像到 canvas 里需要以下两步基本操作：
- 获得一个指向
HTMLImageElement的对象或者另一个 canvas 元素的引用作为源，也可以通过提供一个 URL 的方式来使用图片 - 使用
drawImage()函数将图片绘制到画布上
获取图片
canvas 的 api 可以使用以下类型的任意一种作为图片的源：
-
HTMLImageElement
这些图片可以是
Image()函数构成的，或者任何的<img>元素 -
HTMLVideoElement
用一个 HTML 的
<video>元素作为图片的源,会从中抓取当前帧作为一个图像 -
HTMLCanvasElement
可以使用另一个
<canvas>元素作为图片源 -
ImageBitMap
这是一个高性能的位图，可以延迟绘制
创建 HTMLImageElement 对象
下面是一个例子，我们使用 HTMLImageElement 来创建图像对象。
我们不单单使用<img>标签，也可以使用Image()构造函数来创建 HTMLImageElement对象。
js1var img = new Image() 2img.src = 'xxx.png'
当脚本执行后，图片开始装载。
我们需要等图片加载完成才继续操作下一步：
js1img.onload = function () { 2 // 执行drawImage语句 3}
img 的 src 不单单可以是图片的链接，也可以是 base64url
js1img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='
绘制图片
一旦获得了源图对象，我们就可以使用 drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态，下面是最基础的一种。
drawImage(image, x, y)
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
如果 image 是 svg 图像，那么必须在
<svg>根指定元素的宽度和高度
下面是使用外部图像作为背景，然后画一个折线图的示例：
js1function draw() { 2 var ctx = document.getElementById('canvas').getContext('2d') 3 var img = new Image() 4 img.onload = function () { 5 ctx.drawImage(img, 0, 0) 6 ctx.beginPath() 7 ctx.moveTo(30, 96) 8 ctx.lineTo(70, 66) 9 ctx.lineTo(103, 76) 10 ctx.lineTo(170, 15) 11 ctx.stroke() 12 } 13 img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png' 14}
用背景图我们就不需要绘制复杂的背景，省下不少代码。这里只用到一个 image 对象，于是就在它的 onload 事件响应函数中触发绘制动作。drawImage 方法将背景图放置在 canvas 的左上角 (0,0) 处。
最终结果是这样的：
缩放图片
drawImage方法能够传递width和height来控制画出来的图片的大小。
drawImage(image, x, y, width, height)
js1function draw() { 2 if (canvas.getContext) { 3 let ctx = canvas.getContext('2d') 4 let image = new Image() 5 image.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg' 6 image.onload = function () { 7 ctx.drawImage(image, 0, 0, 30, 30) 8 } 9 } 10}
上面的代码可以绘制出 30*30 的图片
切片
切片也用drawImage 完成，参数是 8 个
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数是源的引用，其它 8 个参数最好是参照右边的图解，前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。
以下代码会截取原图片(40,80)位置的头像，并将其做成 100*100 大小的图片，放到canvas 画布坐标为(120,120)的位置。
js1function draw() { 2 if (canvas.getContext) { 3 let ctx = canvas.getContext('2d') 4 let image = new Image() 5 image.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg' 6 image.onload = function () { 7 ctx.drawImage(image, 40, 80, 100, 100, 120, 120, 100, 100) 8 } 9 } 10}
换句话说，切片就是在缩放图片 API 中间加了 4 个参数来定义从哪个位置开始切片，切多大的图片。
draw 多个图片
一个 canvas 画布可以同时画多个图片，下面的例子是用多个图片来画相框的例子：
html1<canvas width="300" height="300"></canvas> 2<img class="picture_frame" hidden src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" alt="" /> 3<script> 4 const canvas = document.querySelector('canvas') 5 const frame = document.querySelector('.picture_frame') 6 function draw() { 7 if (canvas.getContext) { 8 let ctx = canvas.getContext('2d') 9 let image = new Image() 10 image.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg' 11 image.onload = function () { 12 ctx.drawImage(image, 40, 80, 100, 100, 120, 120, 100, 100) 13 frame 14 ctx.drawImage(frame, 110, 110, 120, 120) 15 } 16 } 17 } 18 draw() 19</script>
状态保存和恢复
-
save()保存画布的所有状态
-
restore()恢复 canvas 的状态
Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。
当 save 时，canvas会将当前状态推送到一个栈中保存。
当restore调用后，上一个保存的状态就会从栈中弹出，状态会被恢复到上一次保存的状态。（注意，这不是撤销功能，而是将修改的状态变成上一个保存的状态）
下面的代码使用 save 和 restore 功能来绘制嵌套的矩形。
js1function draw() { 2 if (canvas.getContext) { 3 let ctx = canvas.getContext('2d') 4 // 先画一个黑色的框 5 ctx.fillStyle = 'black' 6 ctx.fillRect(0, 0, 300, 300) 7 // 保存黑色样式 8 ctx.save() 9 // 再画一个蓝色的框 10 ctx.fillStyle = 'blue' 11 ctx.fillRect(20, 20, 260, 260) 12 // 保存蓝色样式 13 ctx.save() 14 // 最后画一个白色的框 15 ctx.fillStyle = 'white' 16 ctx.fillRect(40, 40, 220, 220) 17 // 恢复成蓝色 18 ctx.restore() 19 ctx.fillRect(60, 60, 180, 180) 20 // 恢复成黑色 21 ctx.restore() 22 ctx.fillRect(80, 80, 140, 140) 23 } 24}
变形
变形Transformations可以对网格进行移动、缩放和旋转。（类似于 css3 的 transform）
translate 移动
使用translate可以将 canvas 移动到不同的位置
translate(x, y)
translate方法接受两个参数。x 是左右偏移量，y 是上下偏移量。
在使用变形相关 API 时最好配合 save以及restore来保存和恢复状态，比如以下例子：
js1const canvas = document.querySelector('canvas') 2if (canvas.getContext) { 3 const ctx = canvas.getContext('2d') 4 ctx.strokeStyle = 'red' 5 // 保存红色边框颜色 6 ctx.save() 7 ctx.strokeStyle = 'green' 8 // 移动原点到（10,10）的位置 9 ctx.translate(10, 10) 10 ctx.strokeRect(0, 0, 50, 50) 11 // 恢复状态 12 ctx.restore() 13 ctx.strokeRect(0, 0, 50, 50) 14}
这个例子显示了一些移动 canvas 原点的好处。如果不使用 translate方法，那么所有矩形都将被绘制在相同的位置（0,0）。translate方法同时让我们可以任意放置这些图案，而不需要在 strokeRect() 方法中手工调整坐标值，既好理解也方便使用。
rotate 旋转
rotate方法，它用于以原点为中心旋转 canvas。
-
rotate(angle)这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate方法。
js1const canvas = document.querySelector('canvas') 2if (canvas.getContext) { 3 const ctx = canvas.getContext('2d') 4 ctx.save() 5 ctx.strokeStyle = 'green' 6 // 改变原点 7 ctx.translate(100, 100) 8 // 旋转 9 ctx.rotate(45) 10 ctx.strokeRect(0, 0, 50, 50) 11}
scaling 缩放
js1scale(x, y)
scale 方法可以缩放画布的水平和垂直的单位。两个参数都是实数，可以为负数，x 为水平缩放因子，y 为垂直缩放因子，如果比 1 小，会缩小图形， 如果比 1 大会放大图形。默认值为 1， 为实际大小。
js1const canvas = document.querySelector('canvas') 2if (canvas.getContext) { 3 const ctx = canvas.getContext('2d') 4 ctx.save() 5 ctx.strokeStyle = 'green' 6 ctx.translate(40, 40) 7 8 ctx.scale(2, 2) 9 ctx.strokeRect(0, 0, 50, 50) 10 11 ctx.restore() 12 ctx.strokeStyle = 'red' 13 ctx.translate(75, 75) 14 ctx.scale(0.5, 0.5) 15 ctx.strokeRect(0, 0, 50, 50) 16}
transforms 变形
最后一个方法允许对变形矩阵直接修改。
js1transform(a, b, c, d, e, f)
a 是水平缩放
b 是垂直倾斜
c 是水平倾斜
d 是垂直缩放
e 是水平移动
f 是垂直移动
a 跟 d 相当于 scale，e 跟 f 相当于 translate
默认值是(1,0,0,1,0,0)
其中还有两个相关的 API：
-
setTransform(a, b, c, d, e, f)这个方法会将当前的变形矩阵重置为单位矩阵，然后用相同的参数调用
transform方法。从根本上来说，该方法是取消了当前变形,然后设置为指定的变形,一步完成。
-
重置当前变形为单位矩阵，它和调用以下语句是一样的：
ctx.setTransform(1, 0, 0, 1, 0, 0);
这里有个例子可以尝试一下：
组合 Compositing
globalCompositeOperation
使用globalCompositeOperation属性能够控制绘制顺序。比如默认情况下新的图形总是在旧的图形之上，但是通过globalCompositeOperation可以改变这种情况。
MDN 的示例写得已经很清楚了
clip
这里有一段代码，可以绘制星星
js1function drawStar(ctx, r) { 2 ctx.save() 3 ctx.beginPath() 4 ctx.moveTo(r, 0) 5 for (var i = 0; i < 9; i++) { 6 ctx.rotate(Math.PI / 5) 7 if (i % 2 == 0) { 8 ctx.lineTo((r / 0.525731) * 0.200811, 0) 9 } else { 10 ctx.lineTo(r, 0) 11 } 12 } 13 ctx.closePath() 14 ctx.fill() 15 ctx.restore() 16}
我们用它来绘制满屏的星星
js1function draw() { 2 var ctx = document.getElementById('canvas').getContext('2d') 3 ctx.fillRect(0, 0, 150, 150) 4 ctx.translate(75, 75) 5 6 // draw stars 7 for (var j = 1; j < 50; j++) { 8 ctx.save() 9 ctx.fillStyle = '#fff' 10 ctx.translate(75 - Math.floor(Math.random() * 150), 75 - Math.floor(Math.random() * 150)) 11 drawStar(ctx, Math.floor(Math.random() * 4) + 2) 12 ctx.restore() 13 } 14}
但是如果我们在 draw stars 前将其裁剪一下，那么就可以先裁剪出一片区域，之后所有出现在它里面的东西才会画出来。
js1 // Create a circular clipping path 2 ctx.beginPath(); 3 ctx.arc(0, 0, 60, 0, Math.PI * 2, true); 4 ctx.clip(); 5 6 // draw background 7 var lingrad = ctx.createLinearGradient(0, -75, 0, 75); 8 lingrad.addColorStop(0, "#232256"); 9 lingrad.addColorStop(1, "#143778"); 10 ctx.fillStyle = lingrad; 11 ctx.fillRect(-75, -75, 150, 150); 12 13 // draw stars 14 ...
实战 sign 签名板
基于上面的 API，我实现了一个签名功能的画板，演示一下：
代码如下，很简单，不多解释了：
html