onLoad: function(options) { const that = this; const ctx = wx.createCanvasContext("mycanvas"); ctx.setFillStyle("red"); ctx.fillRect(10,10,150,100); ctx.draw(true,function(){ console.log("???") }); } |
<canvas id="mycanvas" style="display:block;width:500px;height:500px;"></canvas> |
以上代码 应该是在页面上绘制一个填充矩形, 实际上什么也没有显示,而且draw回调也没有执行! 基础库:2.9.4 希望早点解决,项目很急
第一点：.wxml 里面的定义 canvas 节点 要用 canvas-id 而不是 id
第二点 ：.js 里面 创建 canvas 的绘图上下文 CanvasContext 对象 有两个参数:
wx.createCanvasContext(string canvasId, Object this) 其中 string canvasId 是指要获取上下文的canvas 组件 canvas-id 属性 而 Object this 在自定义组件下，当前组件实例的this，标识在这个自定义组件下查找拥有 canvas-id 的 canvas , 如果省略则不再任何自定义组件内查找
小程序开发文档你值得拥有
canvas现在有两个接口，你这种写法用的是老接口。在wxml中定义canvas节点的，要用canvas-id="mycanvas"，而不是id="mycanvas"