绘图

解释：canvas 画布，可使用 JS 操作 canvas 上下文，发出指令，进行绘制。

SWAN模板写法示例：

<canvas canvas-id="myCanvas" />

JS写法示例：

Page({
    onReady: function () {
        const ctx = this.createCanvasContext('myCanvas');
        ctx.setFillStyle('#ff0000');
        ctx.arc(100, 100, 50, 0, 2 * Math.PI);
        ctx.fill();
        ctx.draw();
    }
});

我们来回顾一下，刚刚都执行了哪些指令：

1、创建绘图上下文

推荐使用 Page 对象上挂载的createCanvasContext方法，进行绘制上下文的创建：

Page({
    onReady: function () {
        const ctx = this.createCanvasContext('myCanvas');
    }
});

当然，也可以使用 SWAN 上挂载的createCanvasContext方法。如下，我们调用 SWAN 的接口createCanvasContext创建了一个绘制上下文（但请注意，使用 SWAN 上挂载的createCanvasContext，会在当前用户可见的 Page 中寻找canvas）。

const ctx = swan.createCanvasContext('myCanvas');

2、发送绘制指令

设置颜色，并画一个圆，填充。

ctx.setFillStyle('#ff0000');

ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

3、绘制执行上面已经发出的指令，进行 canvas 绘制。

ctx.draw();