canvas

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

示例

扫码体验

canvas - 图1请使用百度APP扫码

图片示例

canvas - 图2

canvas - 图3

canvas - 图4

代码示例

在开发者工具中预览效果

  1. <canvas canvas-id="myCanvas" />
  1. Page({
  2. onReady: function () {
  3. const CanvasContext = this.createCanvasContext('myCanvas');
  4. CanvasContext.setFillStyle('#ff0000');
  5. CanvasContext.arc(100, 100, 50, 0, 2 * Math.PI);
  6. CanvasContext.fill();
  7. CanvasContext.draw();
  8. }
  9. });

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

1、创建绘图上下文

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

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

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

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

2、发送绘制指令

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

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

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

  1. CanvasContext.draw();

坐标系

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

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

代码示例 :

在开发者工具中预览效果

  1. <canvas canvas-id="myCanvas"
  2. style="margin: 5px; border:1px solid #d3d3d3;"
  3. bindtouchstart="start"
  4. bindtouchmove="move"
  5. bindtouchend="end"/>
  6. <view hidden="{{hidden}}">
  7. Coordinates: ({{x}}, {{y}})
  8. </view>
  1. Page({
  2. data: {
  3. x: 0,
  4. y: 0,
  5. hidden: true
  6. },
  7. start (e) {
  8. this.setData({
  9. hidden: false,
  10. x: e.touches[0].x,
  11. y: e.touches[0].y
  12. })
  13. },
  14. move (e) {
  15. this.setData({
  16. x: e.touches[0].x,
  17. y: e.touches[0].y
  18. })
  19. },
  20. end (e) {
  21. this.setData({
  22. hidden: true
  23. })
  24. }
  25. })