小程序canvas绘图在编辑器上面没有问题,但是在真机预览就出现不显示的问题,请问大家有没有遇到这个问题????
代码:
const ctx = wx.createCanvasContext( 'myCanvas' , this .$scope); ctx.beginPath(); //右底部透明背景 ctx.setFillStyle( 'white' ); ctx.setGlobalAlpha(0) ctx.fillRect(X*0.8,0, X*0.2, Y); ctx.save(); //右侧透明半圆 ctx.setGlobalAlpha(1); ctx.arc(X, 0.48*Y, 10, 0, 2 * Math.PI, true ); ctx.clip(); ctx.setFillStyle( 'white' ); ctx.setGlobalAlpha(1); ctx.fillRect(X*0.8,0, X*0.2, Y); ctx.restore(); ctx.closePath(); ctx.beginPath(); //左底部透明背景 ctx.setFillStyle( 'white' ); ctx.setGlobalAlpha(0) ctx.fillRect(0,0, X*0.8, Y); ctx.save(); //左侧透明半圆 ctx.setGlobalAlpha(1); ctx.arc(0, 0.48*Y, 10, 0, 2 * Math.PI, true ); ctx.clip(); ctx.setFillStyle( 'white' ); ctx.setGlobalAlpha(1) ctx.fillRect(0,0, X*0.8, Y); ctx.drawImage(ImageTep.tempFilePath,0,0,0.68*X,0.48*Y); ctx.restore(); ctx.save(); ctx.closePath(); // 画白色矩形遮盖底部轮廓线 ctx.beginPath(); ctx.setFillStyle( 'white' ); ctx.setGlobalAlpha(1) ctx.fillRect(0.67*X,0, X*0.2, Y); ctx.save(); // 画三角形遮盖图片 ctx.moveTo(0.67*X,0); ctx.lineTo(0.68*X,0.48*Y); ctx.lineTo(0.28*X,0.48*Y); ctx.fill(); ctx.save(); // 信息 // 公司 职位 ctx.setFontSize(14) ctx.setFillStyle( '#888' ) ctx.setTextAlign( 'left' ) ctx.fillText( '中国人保' , 0.78*X,0.086*Y); ctx.fillText( '产品经理' , 0.78*X,0.225*Y); ctx.save(); // 名字 ctx.setFontSize(21) ctx.setFillStyle( '#262628' ) ctx.setTextAlign( 'left' ) ctx.fillText( '张静' , 0.58*X,0.23*Y); ctx.save(); //底部二维码和文字 ctx.drawImage(ImageTep.tempFilePath,0.42*X,0.63*Y,0.15*X); ctx.save(); //扫一扫文字 ctx.setFontSize(14) ctx.setFillStyle( '#333' ) ctx.setTextAlign( 'left' ) ctx.fillText( '扫一扫' , 0.435*X,0.8*Y); ctx.setFontSize(13) ctx.setFillStyle( '#bbb' ) ctx.setTextAlign( 'left' ) ctx.fillText( '了解我的更多' , 0.37*X,0.86*Y); ctx.fillText( '信息' , 0.4635*X,0.895*Y); ctx.save(); ctx.draw(); // 关闭绘图 |
我这也出现了 偶尔出现
提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
https://developers.weixin.qq.com/s/nvWQuNmR7G4S
你是新版本的工具?
是的
我把wxml文件和js文件复制粘贴到这里 你看一下吧 代码也没多少 就是一个canvas方法
蒙层后面的也是图片?