开发
API

CanvasContext.beginPath

基础库 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

点击纠错
评价此篇文档