共计 672 个字符，预计需要花费 2 分钟才能阅读完成。
2. 矩形
canvas 只支持一种原生的图形绘制：矩形。
所有其他的图形的绘制都至少需要生成一条路径。
绘制矩形三种方法：
// 绘制一个填充的矩形
fillRect(x, y, width, height);
// 绘制一个矩形的边框
strokeRect(x, y, width, height);
// 清除指定矩形区域，让清除部分完全透明。
clearRect(x, y, width, height);
矩形示例
3. 路径
图形的基本元素是路径。路径是点的集合。使用路径绘制图形一般步骤如下：
1.beginPath() 新建一条路径（有时需要创建路径起始点）
2.lineTo,arc,rect 等绘制路径
3.closePath 闭合路径（根据实际需求）
4.stroke fill 绘制或者填充（路径没有此步骤，图形不会显示）
路径绘制常见方法
// 直线路径
lineTo(x, y)
// 矩形路径
rect(x, y, width, height)
// 圆弧路径
arc(x, y, radius, startAngle, endAngle, anticlockwise)
// 椭圆路径 (chrome37+)
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
// 二次贝塞尔曲线
quadraticCurveTo(cp1x, cp1y, x, y)
// 三次贝塞尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
// Path2D(chrome36+, addPath chrome68+)
new Path2D(path);
