微信小程序使用html2canvas,微信小程序canvas的使用

画布。2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性)，同时支持同层渲染。

Canvas 2D 示例代码

html:

js:// canvas.js

Page({

onReady() {

const query = wx.createSelectorQuery()

query.select('#myCanvas')

.fields({ node: true, size: true })

.exec((res) => {

const canvas = res[0].node

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

const dpr = wx.getSystemInfoSync().pixelRatio

canvas.width = res[0].width * dpr

canvas.height = res[0].height * dpr

ctx.scale(dpr, dpr)

ctx.fillRect(0, 0, 100, 100)

})

}

})

WebGL 示例代码:

html:

js:// canvas.js

Page({

onReady() {

const query = wx.createSelectorQuery()

query.select('#myCanvas').node().exec((res) => {

const canvas = res[0].node

const gl = canvas.getContext('webgl')

gl.clearColor(1, 0, 1, 1)

gl.clear(gl.COLOR_BUFFER_BIT)

})

}

})