canvas

画布。

属性名类型默认值说明
cavas-idStringcanvas组件的标识，必须设置该属性
canvas组件的默认宽度为300px，高度为225px

示例

  1. <canvas canvas-id="canvas" class="canvas"></canvas>
  1. Page({
  2.   onShow: function (res) {
  3.     this.position = {
  4.       x: 150,
  5.       y: 150,
  6.       vx: 2,
  7.       vy: 2
  8.     }
  9.     this.interval = setInterval(this.drawBall, 17)
  10.   },
  11.   drawBall: function () {
  12.     var p = this.position
  13.     p.x += p.vx
  14.     p.y += p.vy
  15.     if (p.x >= 300) {
  16.       p.vx = -2
  17.     }
  18.     if (p.x <= 7) {
  19.       p.vx = 2
  20.     }
  21.     if (p.y >= 300) {
  22.       p.vy = -2
  23.     }
  24.     if (p.y <= 7) {
  25.       p.vy = 2
  26.     }
  28.     var context = tt.createCanvasContext('canvas')
  30.     function ball(x, y) {
  31.       context.beginPath(0)
  32.       context.arc(x, y, 5, 0, Math.PI * 2)
  33.       context.setFillStyle('#1aad19')
  34.       context.fill()
  35.       context.stroke()
  36.     }
  38.     ball(p.x, 150)
  39.     ball(150, p.y)
  40.     ball(300 - p.x, 150)
  41.     ball(150, 300 - p.y)
  42.     ball(p.x, p.y)
  43.     ball(300 - p.x, 300 - p.y)
  44.     ball(p.x, 300 - p.y)
  45.     ball(300 - p.x, p.y)
  47.     console.log('will call context.draw');
  48.     context.draw();
  49.   },
  50.   onUnload: function () {
  51.     clearInterval(this.interval)
  52.   }
  53. })
相关api: tt.createCanvasContext

原文: https://developer.toutiao.com/docs/comp/canvas.html