目录

Path2D

Canvas 2D API的接口Path2D用来声明路径，此路径可用于CanvasRenderingContext2D对象。CanvasRenderingContext2D接口的路径方法也存在于Path2D这个接口中，允许在canvas中根据需要创建可以保留并重用的路径。

Path2D.addPath

Path2D.addPath(Path2D path)

添加路径到当前路径。

起始版本： 2.0.2

参数：

参数 类型 必填 描述
path Path2D 是 添加的Path2D路径。

示例：

has.createSelectorQuery().select('#myCanvas')
  .node((res) => {
    const canvas = res.node;
    const ctx = canvas.getContext('2d');
    const path = canvas.createPath2D();
    path.rect(30, 30, 100, 100);
    const path1 = canvas.createPath2D();
    path1.rect(40, 40, 50, 50);
    path.addPath(path1);
    ctx.stroke(path);
  })
  .exec();

Path2D.arc

Path2D.arc(number x, number y, number radius, number startAngle, number endAngle, boolean counterclockwise)

添加一段圆弧路径。

起始版本： 2.0.2

参数：

参数 类型 必填 描述
x number 是 圆心横坐标。
y number 是 圆心纵坐标。
radius number 是 圆形半径，必须为正数。
startAngle number 是 圆弧开始角度。
endAngle number 是 圆弧结束角度。
counterclockwise boolean 否 是否逆时针绘制。如果传true，则会从endAngle开始绘制到startAngle。

示例：

has.createSelectorQuery().select('#myCanvas')
  .node((res) => {
    const canvas = res.node;
    const ctx = canvas.getContext('2d');
    const path = canvas.createPath2D();
    path.arc(75, 75, 50, 0, Math.PI * 2, true);
    ctx.stroke(path);
  })
  .exec();

Path2D.arcTo

Path2D.arcTo(number x1, number y1, number x2, number y2, number radius)

通过给定的控制点和半径添加一个圆弧。

起始版本： 2.0.2

参数：

参数 类型 必填 描述
x1 number 是 第一个控制点的横坐标。
y1 number 是 第一个控制点的纵坐标。
x2 number 是 第二个控制点的横坐标。
y2 number 是 第二个控制点的纵坐标。
radius number 是 圆弧的半径，必须为非负值。

示例：

has.createSelectorQuery().select('#myCanvas')
  .node((res) => {
    const canvas = res.node;
    const ctx = canvas.getContext('2d');
    const path = canvas.createPath2D();
    path.moveTo(200, 20);
    path.arcTo(200, 130, 50, 20, 40);
    ctx.stroke(path);
  })
  .exec();

Path2D.bezierCurveTo

Path2D.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)

绘制三次贝塞尔曲线。

起始版本： 2.0.2

参数：

参数 类型 必填 描述
cp1x number 是 第一个控制点的横坐标。
cp1y number 是 第一个控制点的纵坐标。
cp2x number 是 第二个控制点的横坐标。
cp2y number 是 第二个控制点的纵坐标。
x number 是 结束点横坐标。
y number 是 结束点纵坐标。

示例：

has.createSelectorQuery().select('#myCanvas')
  .node((res) => {
    const canvas = res.node;
    const ctx = canvas.getContext('2d');
    const path = canvas.createPath2D();
    path.bezierCurveTo(30, 100, 200, 100, 200, 20);
    ctx.stroke(path);
  })
  .exec();

Path2D.closePath

Path2D.closePath()

关闭当前子路径。会以直线连接当前子路径的起点和最后一个点。

起始版本： 2.0.2

示例：

has.createSelectorQuery().select('#myCanvas')
  .node((res) => {
    const canvas = res.node;
    const ctx = canvas.getContext('2d');
    const path = canvas.createPath2D();
    path.bezierCurveTo(20, 100, 200, 100, 200, 20);
    path.closePath();
    ctx.stroke(path);
  })
  .exec();

Path2D.ellipse

Path2D.ellipse(number x, number y, number radiusX, number radiusY, number rotation, number startAngle, number endAngle, boolean counterclockwise)

添加椭圆弧路径。

起始版本： 2.0.2

参数：

参数 类型 必填 描述
x number 是 椭圆圆心横坐标。
y number 是 椭圆圆心纵坐标。
radiusX number 是 椭圆长轴半径，必须为非负数。
radiusY number 是 椭圆短轴半径，必须为非负数。
rotation number 是 椭圆旋转角度。
startAngle number 是 圆弧开始角度。
endAngle number 是 圆弧结束角度。
counterclockwise boolean 否 是否逆时针绘制。如果传true, 则会从endAngle开始绘制到startAngle。

示例：

has.createSelectorQuery().select('#myCanvas')
  .node((res) => {
    const canvas = res.node;
    const ctx = canvas.getContext('2d');
    const path = canvas.createPath2D();
    path.ellipse(80, 50, 60, 30, 0, 0, Math.PI * 2, false);
    ctx.stroke(path);
  })
  .exec();

Path2D.lineTo

Path2D.lineTo(number x, number y)

增加一个新点，然后创建一条从上次指定点到目标点的线。

起始版本： 2.0.2

参数：

参数 类型 必填 描述
x number 是 结束点横坐标。
y number 是 结束点纵坐标。

示例：

has.createSelectorQuery().select('#myCanvas')
  .node((res) => {
    const canvas = res.node;
    const ctx = canvas.getContext('2d');
    const path = canvas.createPath2D();
    path.moveTo(10, 10);
    path.lineTo(90, 120);
    ctx.stroke(path);
  })
  .exec();

Path2D.moveTo

Path2D.moveTo(number x, number y)

把路径移动到画布中的指定点，不创建线条。

起始版本： 2.0.2

参数：

参数 类型 必填 描述
x number 是 点的横坐标。
y number 是 点的纵坐标。

示例：

has.createSelectorQuery().select('#myCanvas')
  .node((res) => {
    const canvas = res.node;
    const ctx = canvas.getContext('2d');
    const path = canvas.createPath2D();
    path.moveTo(10, 10);
    path.lineTo(90, 120);
    ctx.stroke(path);
  })
  .exec();

Path2D.quadraticCurveTo

Path2D.quadraticCurveTo(number cpx, number cpy, number x, number y)

绘制二次贝塞尔曲线。

起始版本： 2.0.2

参数：

参数 类型 必填 描述
cpx number 是 控制点横坐标。
cpy number 是 控制点纵坐标。
x number 是 结束点横坐标。
y number 是 结束点纵坐标。

示例：

has.createSelectorQuery().select('#myCanvas')
  .node((res) => {
    const canvas = res.node;
    const ctx = canvas.getContext('2d');
    const path = canvas.createPath2D();
    path.moveTo(50, 120);
    path.quadraticCurveTo(50, 80, 150, 100);
    ctx.stroke(path);
  })
  .exec();

Path2D.rect

Path2D.rect(number x, number y, number width, number height)

绘制一个矩形路径。

起始版本： 2.0.2

参数：

参数 类型 必填 描述
x number 是 矩形起始点的横坐标。
y number 是 矩形起始点的纵坐标。
width number 是 矩形的宽度，正数向右延伸，负数向左延伸。
height number 是 矩形的高度，正数向右下延伸，负数向上延伸。

示例：

has.createSelectorQuery().select('#myCanvas')
  .node((res) => {
    const canvas = res.node;
    const ctx = canvas.getContext('2d');
    const path = canvas.createPath2D();
    path.rect(10, 10, 100, 100);
    ctx.fill(path);
  })
  .exec();