canvas

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

示例

扫码体验

请使用百度APP扫码

图片示例

代码示例

在开发者工具中预览效果

<canvas canvas-id="myCanvas" />

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

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

1、创建绘图上下文

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

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

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

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

2、发送绘制指令

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

CanvasContext.setFillStyle('#ff0000');
CanvasContext.arc(100, 100, 50, 0, 2 * Math.PI);
CanvasContext.fill();

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

CanvasContext.draw();

坐标系

canvas 坐标系，以左上角为(0, 0)，横轴为 x，纵轴为 y。如：CanvasContext.arc(100, 200, 50, 0, 2 * Math.PI);命令，就是在x： 100,y: 200为圆心处，开始画圆。

我们可以在 canvas 中加上一些事件，来观测它的坐标系。

代码示例 ：

在开发者工具中预览效果

<canvas canvas-id="myCanvas"
  style="margin: 5px; border:1px solid #d3d3d3;"
  bindtouchstart="start"
  bindtouchmove="move"
  bindtouchend="end"/>
<view hidden="{{hidden}}">
  Coordinates: ({{x}}, {{y}})
</view>

Page({
  data: {
    x: 0,
    y: 0,
    hidden: true
  },
  start (e) {
    this.setData({
      hidden: false,
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  move (e) {
    this.setData({
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  end (e) {
    this.setData({
      hidden: true
    })
  }
})