- 矩形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);