canvas

2022-07-29 06:32

Canvas

Attribute Name	Type	Default	Description	Minimum Version
id	String		Unique component identifier
style	String
class	String
width	String	canvas width attribute
height	String	canvas height attribute
disable-scroll	Boolean	false	forbid screen scroll and pull-to-refresh
onTap	EventHandle		click
onTouchStart	EventHandle		touch action start
onTouchMove	EventHandle		move after touch
onTouchEnd	EventHandle		touch action end
onTouchCancel	EventHandle		touch action interrupted, such as incoming call reminder, pop-up
onLongTap	EventHandle		trigger on long-press for 500ms, thereafter move action does not trigger screen scroll

Note:

The canvas tab has default width 300px and height 225px

On the same page, the id cannot be repeated.

For finer displaying in higher dpr, use the attribute settings to zoom in and use the style to zoom out the canvas. for example:

copy

<!-- getSystemInfoSync().pixelRatio === 2 -->
<canvas width="200" height="200" style="width:100px;height:100px;"/>

Screenshot

canvas

Sample Code

copy

<canvas
  id="canvas"
  class="canvas"
  onTouchStart="log"
  onTouchMove="log"
  onTouchEnd="log"
/>

copy

Page({
  onReady() {
    this.point = {
      x: Math.random() * 295,
      y: Math.random() * 295,
      dx: Math.random() * 5,
      dy: Math.random() * 5,
      r: Math.round(Math.random() * 255 | 0),
      g: Math.round(Math.random() * 255 | 0),
          b: Math.round(Math.random() * 255 | 0),
    };
    this.interval = setInterval(this.draw.bind(this), 17);
  },
  draw() {
    var ctx = my.createCanvasContext('canvas');
    ctx.setFillStyle('#FFF');
    ctx.fillRect(0, 0, 305, 305);
    ctx.beginPath();
    ctx.arc(this.point.x, this.point.y, 10, 0, 2 * Math.PI);
    ctx.setFillStyle("rgb(" + this.point.r + ", " + this.point.g + ", " + this.point.b + ")");
    ctx.fill();
    ctx.draw();
    this.point.x += this.point.dx;
    this.point.y += this.point.dy;
    if (this.point.x <= 5 || this.point.x >= 295) {
      this.point.dx = -this.point.dx;
      this.point.r = Math.round(Math.random() * 255 | 0);
      this.point.g = Math.round(Math.random() * 255 | 0);
      this.point.b = Math.round(Math.random() * 255 | 0);
    }
    if (this.point.y <= 5 || this.point.y >= 295) {
      this.point.dy = -this.point.dy;
      this.point.r = Math.round(Math.random() * 255 | 0);
      this.point.g = Math.round(Math.random() * 255 | 0);
      this.point.b = Math.round(Math.random() * 255 | 0);
    }
  },
  drawBall() {
  },
  log(e) {
    if (e.touches && e.touches[0]) {
      console.log(e.type, e.touches[0].x, e.touches[0].y);
    } else {
      console.log(e.type);
    }
  },
  onUnload() {
    clearInterval(this.interval)
  }
})