MDN文档 canvas教程笔记

MDN Canvas教程
API Canvas​Rendering​Context2D即canvas.getContext('2d')返回的对象类型，几乎所有作图操作基于这个“上下文对象”而非canvas dom，下文以context2D作简称

---

只有矩形、文本、图片是可直接绘制显示的

fillRect(x, y, width, height)
绘制一个填充的矩形
strokeRect(x, y, width, height)
绘制一个矩形的边框
clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。
fillText(text, x, y [, maxWidth])
在(x,y)位置绘制（填充）文本。
strokeText(text, x, y [, maxWidth])
在(x,y)位置绘制（描边）文本。
drawImage(image, dx, dy [, dWidth, dHeight])
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
在(x,y)位置绘制图像。

其他均需要路径

beginPath()
新建一条路径
closePath()
闭合路径（即路径没有闭合时，从当前点生成一条直线路径连到起始点，使其闭合）
stroke()
绘制路径(即描边)
fill()
(根据设置)填充路径内部

路径

context2D路径方法(省略参数)：
moveTo()
将一个新的子路径的起始点移动到(x，y)坐标。
lineTo()
使用直线连接子路径的终点到 x, y 坐标。
quadraticCurveTo()
添加一条二次贝赛尔曲线到当前路径。
bezierCurveTo()
添加一条三次贝赛尔曲线到当前路径。
arc()
添加一条圆弧路径。
arcTo()
根据控制点和半径添加一条圆弧路径(同时使用直线连接前一个点，原因下面解释)
ellipse()
添加一条椭圆路径。
rect()
创建一条矩形路径，矩形的起点位置是 (x, y) ，尺寸为 width 和 height。

额外：
Path2D：直接的路径对象，其具有的方法context2D均有。可作stroke()和fill()的参数而被绘制。意义在于分离出“路径”，从而在多个canvas上重复绘制，更加灵活。
同时可以使用SVG path data来初始化，如new Path2D("M10 10 h 80 v 80 h -80 Z");

样式、变形等

1.颜色、线段粗细、字体、全局透明度等，直接操作context2D的属性。
最常用是fill​Style和strokeStyle。可以对其直接赋值#000、rgba(0,0,0,0)等颜色，也可赋值为createLinearGradient(x1, y1, x2, y2)、createRadialGradient(x1, y1, r1, x2, y2, r2)等对象创建的“渐变对象”。

2.变形、虚线距离等，通过context2D的方法操作
虚线：setLineDash(segments)。segments是一个Array数组，描述交替绘制线段和间距长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。取消虚线可直接设为空数组[]
变形：类似于css的transform属性的各个可用函数。如translate()、rotate()、scale()

重要：
复杂作图时，经常需要变换原点进行旋转、绘图，或切换颜色、线宽，此时可用save()、restore()方法以“栈”结构保存若干设置。

---

额外

1.当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo()，无论实际上是什么。如：
lineTo(10,10);被视为moveTo(10,10);；
arc(0,0,50,0,Math.PI*2);被视为moveTo(0,50);arc(0,0,50,0,Math.PI*2);，即作圆时第一个下笔的点被作为moveTo的点，然后继续作圆

2.所有没有moveTo的跳跃性路径操作，被视为直线路径连接，如：
moveTo(100,100);arc(0,0,50,0,Math.PI*2);绘制后将发现有一条直线从(100,100)连到(0,50)，即从当前点连线到作圆时第一个下笔的点。为了避免这种情况，最简单的方法就是重新beginPath()新开一条路径

3.isPointInPath()、isPointInStroke()：前者判断某点是否在闭合路径内部，后者判断是否在“边”上。
关于如何判断内部，有：
(1)"evenodd": 奇偶环绕规则
以该点为端点，作一条足够长的射线，方向任意。如果与路径(边)相交次数为奇数，则在内部；偶数则在外部。
(2)"nonzero": 非零环绕规则(默认值)
以该点为端点，作一条足够长的射线，方向任意。以该射线为主视角，起始值为0，如果某条路径从左往右穿过，则+1；从右往左穿过，则-1；计算最终的值，如果非0，则在内部；如果为0，则在外部。
注意：我们无需确保每个方向的射线的最终值都一样。即可能90°算到是1，而180°算到是-1，最终他们都是“非0”，结果是一致的。