API
Attribute name | Type | Default value | Description |
---|---|---|---|
id | String | - | Unique identifier of a component |
style | String | - | Declare the style of the canvas. |
class | String | - | Stycle class |
width | String | - | Canvas width |
height | String | - | Canvas height |
disable-scroll | Boolean | false | Disable screen scrolling and pull-to-refresh. |
onTap | EventHandle | - | Click |
onTouchStart | EventHandle | - | Touch action starts |
onTouchMove | EventHandle | - | Moves after touching |
onTouchEnd | EventHandle | - | Touch action ends |
onTouchCancel | EventHandle | - | The touch action is interrupted such as by incoming call and pop-up dialog. |
onLongTap | EventHandle | - | Triggered after a long press of 500 ms. When a long press event is triggered, moving will not trigger the screen scrolling. |
Important:
Canvas has a width of 300 px and a height of 225 px by default.
IDs on the same page cannot be duplicate.
If you require a more detailed display under high DPR, you need to first zoom in canvas with its attribute settings and then zoom out with styles. For example:
<!-- getSystemInfoSync().pixelRatio === 2 -->
<canvas width="200" height="200" style="width:100px;height:100px;"/>
Legend
Code sample
<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, 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)
}
})