CanvasContext.beginPath

收藏

我的收藏

注意：该接口已停止维护，建议使用 Canvas 组件 V2

基础库 1.0.0 开始支持本方法，这是一个同步方法。

开始创建一个新的路径，需要调用 CanvasContext.fill 或者 CanvasContext.stroke 才会使用路径进行填充或描边。

语法

CanvasContext.beginPath()

参数说明

无

返回值

无

扫码体验

代码示例

开发者工具中预览

【示例 1】简单示例：

<!-- index.ttml -->
<canvas canvas-id="myCanvas"></canvas>

Page({
  onReady() {
    const canvasCtx = tt.createCanvasContext("myCanvas");
    canvasCtx.setStrokeStyle("blue");
    // 在最开始的时候相当于调用了一次 beginPath
    canvasCtx.moveTo(20, 20);
    canvasCtx.lineTo(200, 20);
    canvasCtx.stroke();

    // 开启一个新的路径
    canvasCtx.beginPath();
    canvasCtx.setStrokeStyle("green");
    canvasCtx.moveTo(20, 20);
    canvasCtx.lineTo(120, 120);
    canvasCtx.stroke();
    canvasCtx.draw();
  },
});

【示例 2】综合示例：

<!-- index.ttml -->
<canvas canvas-id="myCanvas"></canvas>

Page({
  onReady() {
    const canvasCtx = tt.createCanvasContext("myCanvas");
    // 开始路径1
    canvasCtx.rect(10, 10, 100, 30);
    canvasCtx.setFillStyle("yellow");
    canvasCtx.fill();

    // 创建新的路径2
    canvasCtx.beginPath();
    canvasCtx.rect(10, 40, 100, 30);

    // 该颜色设置仅适用于本矩形 不影响其他路径
    canvasCtx.setFillStyle("blue");
    canvasCtx.fillRect(10, 70, 100, 30);

    canvasCtx.rect(10, 100, 100, 30);

    // 该颜色设置作用于路径2
    canvasCtx.setFillStyle("red");
    canvasCtx.fill();
    canvasCtx.draw();
  },
});

Bug & Tip

• Tip：本 API 仅适用于<canvas> 组件 V1；
• Tip：在最开始的时候相当于调用了一次 CanvasContext.beginPath，见【代码示例 1】；
• Tip：若在同一个路径内进行多次 CanvasContext.setFillStyle、CanvasContext.setStrokeStyle、CanvasContext.setLineWidth 等设置，以最后一次设置为准。