canvas 获取失败? - WXOPEN Club | 微信小程序专业社区

export default class ProgressPanel extends Component {

componentDidMount () {

console.log('test componentDidMount')

const query = wx.createSelectorQuery().in(this)

query.select('#myCanvas')

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

.exec((res) => {

console.log('test ProgressPanel res 没执行到这里', 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)

})

}

public render() {

return (

<View className="panel">

<View className="panel-background">

<View id="canvas_container" className="panel-background-gray">

<canvas style='width: 300px; height: 200px;' canvas-id='myCanvas' />

</View>

)

}

获取失败没有拿到canvas

如果用的是新的 canvas 接口，需要设置 id 而不是 canvas-id，这里有一点区别。