Page({

onLoad: function () {

this.device = wx.getSystemInfoSync()

// 通过 SelectorQuery 获取 Canvas 节点

wx.createSelectorQuery()

.select('#canvas')

.fields({

node: true,

size: true,

})

.exec(this.init.bind(this))

},

init(res) {

const width = res[0].width

const height = res[0].height

const canvas = res[0].node

const ctx = canvas.getContext('2d')

const dpr = wx.getSystemInfoSync().pixelRatio

canvas.width = width * dpr

canvas.height = height * dpr

ctx.scale(dpr, dpr)

const renderLoop = () => {

this.render(ctx)

canvas.requestAnimationFrame(renderLoop)

}

canvas.requestAnimationFrame(renderLoop)

},

render(ctx) {

ctx.clearRect(0, 0, this.device.windowWidth, this.device.windowHeight)

this.drawText(ctx)

},

drawText(ctx) {

ctx.fillStyle = 'red'

ctx.font = '20px sans-serif'

ctx.fillText('123,hi起来', 100, 100)

}

})