Canvas Path2D 的使用详解

7 min read

Path2D是一个包装了SVG Path的API。它可以保存一系列的路径操作，比如直线、曲线、圆弧等，最后生成路径对象后绘制出来。下面是Path2D的详解：

创建Path2D对象：

可以通过构造函数或者从已有的路径对象中创建一个Path2D对象。构造函数可以不传参数或者传入一个SVG路径字符串或另一个Path2D对象，例如：

var path = new Path2D();
var path = new Path2D('M10,10 h 80 v 80 h -80 Z');
var path = new Path2D(path);

新增路径操作：

Path2D对象可以调用以下方法进行路径操作：

  • moveToPoint(x, y)：将画笔移动到指定位置。
  • lineToPoint(x, y)：画一条直线到指定位置。
  • arc(centerX, centerY, radius, startAngle, endAngle, anticlockwise)：画一段弧线，参数意义依次为：圆心位置、半径、起始角度、结束角度、是否逆时针。
  • bezierCurveToPoint(cp1x, cp1y, cp2x, cp2y, x, y)：画一段三次贝塞尔曲线，参数意义为控制点1、控制点2、终点位置。
  • rect(x, y, width, height)：画一个矩形，参数为左上角顶点坐标和矩形宽高。

例如，以下代码绘制了一个简单的三角形路径：

var path = new Path2D();
path.moveTo(10,10);
path.lineTo(80,10);
path.lineTo(50,80);
path.closePath();

关闭路径：

可以使用 closePath() 方法来使该路径闭合，形成一个封闭区域。如果路径当前所在点与第一个路径点不同，closePath() 方法会自动将最后一个路径点与第一个路径点连接。

path.closePath();

渲染路径：

使用 CanvasRenderingContext2D 对象的 stroke() 和 fill() 方法渲染路径。其中，stroke() 方法会绘制路径的轮廓，而 fill() 方法会在路径内部填充颜色。

ctx.stroke(path);
ctx.fill(path);

总结：

Path2D是一个非常强大的画图API，支持多种路径操作和渲染方式，并且可以复用已有的路径对象。开发者可以根据具体需求选择合适的方法进行调用。