Skip to main content

canvas

Last updated on

canvas là một vùng hình chữ nhật phục vụ cho mục đích chứa đồ hoạ. Theo mặc định, nó không có đường viền cũng như nội dung; bạn sẽ sử dụng JavaScript để kết xuất đồ hoạ.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
idstringĐịnh danh duy nhất của canvas
stylestring
classstring
widthnumber300Chiều rộng của canvas
heightnumber225Chiều cao của canvas
disable-scrollbooleanfalseKhông cho canvas scroll
typestringKiểu render đồ hoạ - 2d hay webgl.
onTapeventSự kiện được kích hoạt khi touch vào canvas
onTouchStarteventSự kiện được kích hoạt khi ngón tay bắt đầu touch vào canvas.
onTouchMoveeventSự kiện được kích hoạt khi ngón tay di chuyển trên canvas.
onTouchEndeventSự kiện được kích hoạt khi ngón tay rút khỏi canvas.
onTouchCanceleventSự kiện được hoạt khi hành động touch bị gián đoạn bởi một cuộc gọi hay popup window.
onLongTapeventSự kiện được kích hoạt khi thời gian ngón tay nhấn vào canvas lâu hơn 500 mili giây.
onReadyeventSự kiện được kích hoạt khi canvas được khởi tạo thành công và sẵn sàng hoạt động.

Sample Code

index.txml
<view class="page">
<view class="canvas-view">
<canvas
id="canvas"
width="610"
height="610"
class="canvas"
onTouchStart="log"
onTouchMove="log"
onTouchEnd="log"
/>
</view>
</view>
index.js
Page({
onReady() {
this.point = {
x: Math.random() * 590,
y: Math.random() * 590,
dx: Math.random() * 10,
dy: Math.random() * 10,
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);
this.ctx = my.createCanvasContext('canvas');
},

draw() {
const { ctx } = this;
ctx.setFillStyle('#FFF');
ctx.fillRect(0, 0, 610, 610);

ctx.beginPath();
ctx.arc(this.point.x, this.point.y, 20, 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 <= 10 || this.point.x >= 590) {
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 <= 10 || this.point.y >= 590) {
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);
}
});
index.tcss
.canvas-view {
display: flex;
justify-content: center;
}

.canvas {
width: 305px;
height: 305px;
background-color: #fff;
}