canvas无法正常使用？
发布于 7 年前 作者 qiangdu 366 次浏览 来自 问答
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   希望早点解决,项目很急

2 回复

canvas现在有两个接口，你这种写法用的是老接口。在wxml中定义canvas节点的，要用canvas-id=“mycanvas”，而不是id=“mycanvas”

第一点：.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 , 如果省略则不再任何自定义组件内查找

小程序开发文档你值得拥有

回到顶部