canvas

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

示例

扫码体验

请使用百度APP扫码

图片示例

代码示例

在开发者工具中预览效果

  1. <canvas canvas-id="myCanvas" />
  1. 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、创建绘图上下文 createCanvasContext方法，进行绘制上下文的创建：

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

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

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

2、发送绘制指令 设置颜色，并画一个圆，填充。

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

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

  1. CanvasContext.draw();

坐标系

CanvasContext.arc(100, 200, 50, 0, 2 * Math.PI);命令，就是在x： 100,y: 200为圆心处，开始画圆。 我们可以在 canvas 中加上一些事件，来观测它的坐标系。 代码示例 ： 在开发者工具中预览效果

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