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> </View> </View> ) } } |
获取失败 没有拿到canvas
如果用的是新的 canvas 接口，需要设置 id 而不是 canvas-id，这里有一点区别。
这个加id="myCanvas"就可以了，
我遇到的问题是开发者工具里能获取canvas，但真机调试不行，不知道咋回事儿
亲，，怎么获取的呢，，也是获取不到
麻烦提供能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）