76 lines
1.4 KiB
JavaScript
76 lines
1.4 KiB
JavaScript
Page({
|
|
onShareAppMessage() {
|
|
return {
|
|
title: 'canvas',
|
|
path: 'pages/component/canvas/canvas'
|
|
}
|
|
},
|
|
onReady() {
|
|
this.position = {
|
|
x: 150,
|
|
y: 150,
|
|
vx: 2,
|
|
vy: 2
|
|
}
|
|
this.drawBall()
|
|
this.interval = setInterval(this.drawBall, 17)
|
|
this.drawImage()
|
|
this.drawImageHidpi()
|
|
},
|
|
|
|
drawBall() {
|
|
const p = this.position
|
|
p.x += p.vx
|
|
p.y += p.vy
|
|
if (p.x >= 300) {
|
|
p.vx = -2
|
|
}
|
|
if (p.x <= 7) {
|
|
p.vx = 2
|
|
}
|
|
if (p.y >= 300) {
|
|
p.vy = -2
|
|
}
|
|
if (p.y <= 7) {
|
|
p.vy = 2
|
|
}
|
|
|
|
const context = wx.createCanvasContext('canvas')
|
|
|
|
function ball(x, y) {
|
|
context.beginPath(0)
|
|
context.arc(x, y, 5, 0, Math.PI * 2)
|
|
context.setFillStyle('#1aad19')
|
|
context.setStrokeStyle('rgba(1,1,1,0)')
|
|
context.fill()
|
|
context.stroke()
|
|
}
|
|
|
|
ball(p.x, 150)
|
|
ball(150, p.y)
|
|
ball(300 - p.x, 150)
|
|
ball(150, 300 - p.y)
|
|
ball(p.x, p.y)
|
|
ball(300 - p.x, 300 - p.y)
|
|
ball(p.x, 300 - p.y)
|
|
ball(300 - p.x, p.y)
|
|
context.draw()
|
|
},
|
|
|
|
drawImage() {
|
|
const context = wx.createCanvasContext('canvas2')
|
|
context.drawImage('./car.png', 0, 0)
|
|
context.draw()
|
|
},
|
|
|
|
drawImageHidpi() {
|
|
const context = wx.createCanvasContext('canvas3')
|
|
context.drawImage('./car.png', 0, 0)
|
|
context.draw()
|
|
},
|
|
|
|
onUnload() {
|
|
clearInterval(this.interval)
|
|
}
|
|
})
|