2、在js里添加方法
//画弧线drawCurve(){//通过SelectorQuery获取Canvas节点wx.createSelectorQuery().select('#canvas').node(function(res){console.log(res.node)//节点对应的Canvas实例。constcanvas=res.nodeconstctx=canvas.getContext('2d')ctx.lineWidth=10ctx.strokeStyle='red'ctx.lineCap='round'ctx.beginPath()//arc(圆心x轴，圆心y轴，半径单位像素，起始角度弧度制从x轴正方向开始，结束角度弧度制，true表示逆时针绘制)ctx.arc(canvas.width/2,canvas.height-ctx.lineWidth,canvas.height-(ctx.lineWidth*2),0,3.14926,true)ctx.stroke()}).exec()},//画圆drawCircle(){//通过SelectorQuery获取Canvas节点wx.createSelectorQuery().select('#canvas').node(function(res){console.log(res.node)//节点对应的Canvas实例。constcanvas=res.nodeconstctx=canvas.getContext('2d')ctx.strokeStyle='red'ctx.beginPath()//arc(圆心x轴，圆心y轴，半径单位像素，起始角度弧度制从x轴正方向开始，结束角度弧度制，true表示逆时针绘制)ctx.arc(canvas.width/2,canvas.height/2,50,0,2*3.14926,true)ctx.stroke()}).exec()}
效果
绘制艺术字：
//绘制文字drawText(){//通过SelectorQuery获取Canvas节点wx.createSelectorQuery().select('#canvas').node(function(res){console.log(res.node)//节点对应的Canvas实例。constcanvas=res.nodeconstctx=canvas.getContext('2d')ctx.font="50pxsans-serif"//ctx.fillText("HelloWorld",10,100);ctx.strokeText("HelloWorld",10,100)}).exec()},
效果：
删除指定文字
//绘制文字删除线drawTextDelete(){//通过SelectorQuery获取Canvas节点wx.createSelectorQuery().select('#canvas').node(function(res){console.log(res.node)//节点对应的Canvas实例。constcanvas=res.nodeconstctx=canvas.getContext('2d')ctx.font="50pxsans-serif"ctx.fillText("HelloWorld",10,100);//ctx.globalCompositeOperation="source-over";//全局合成操作ctx.fillStyle="red";ctx.fillRect(15,80,85,10);//ctx.globalCompositeOperation="source-over";//全局合成操作ctx.fillStyle="red";ctx.fillRect(160,80,30,10);}).exec()},
如果本篇文档对你有帮助,打赏Jason_c根华子吧,他的私房钱被老婆没收了,呜呜!