我这之前是这样的
ctx = wx.createCanvasContext(this.canvasId, this);
官方写的替代方法是这样的
wx.createSelectorQuery().select('.the-video-class').context(function(res){
console.log(res.context) // 节点对应的 Context 对象。如:选中的节点是 <video> 组件,那么此处即返回 VideoContext 对象
}).exec()
因为this.canvasId是动态传值的 select到的id是null 所以也就没法.context()
那我现在应该怎么写啊?还有后边那个this 怎么传上去? 希望大佬帮忙指点一下
我这可以了。
另外可以说一下:
wx.createSelectorQuery().select('.the-video-class').context(function(res){ console.log(res.context) // 节点对应的 Context 对象。如:选中的节点是 <video> 组件,那么此处即返回 VideoContext 对象 }).exec()
如果在组件函数中可以用 this.createSelectorQuery()
或是wx.createSelectorQuery.in(this)
此时就要注意this指向问题
官方有给说明,我就是照官方写法来的:
<!-- canvas.wxml --> <canvas type="2d" id="myCanvas"></canvas>
// 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) }) } })
详见:https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html