canvas

2023-04-28 21:00

Canvas.

Property	Type	Default	Description
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

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