canvas component mini program mPaaS-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

This topic describes the canvas component.

Property name	Type	Default	Description
id	String	-	The unique identifier of the component.
style	String	-	The style declaration of the component.
class	String	-	The style class of the component.
width	String	-	The width of the canvas.
height	String	-	The height of the canvas.
disable-scroll	Boolean	false	Disables screen scrolling and the pull-to-refresh action.
onTap	EventHandle	-	A tap event.
onTouchStart	EventHandle	-	A touch action starts.
onTouchMove	EventHandle	-	Shift on touch
onTouchEnd	EventHandle	-	A touch action ends.
onTouchCancel	EventHandle	-	The touch action is interrupted by an event such as an incoming call or a pop-up window.
onLongTap	EventHandle	-	Triggered after a long press of 500 ms. After this event is triggered, moving your finger will not cause the screen to scroll.

The canvas tag has a default width of 300 px and a default height of 225 px.
The id must be unique on the same page.
To achieve a sharper display on screens with a high Device Pixel Ratio (DPR), you can first scale up the canvas using its properties and then scale it down using styles. For example:
```

<canvas width="200" height="200" style="width:100px;height:100px;"/>
```

Figure

image | center

Code examples

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

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)
  }
})