微信小程序 使用canvas绘图

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

微信小程序的绘图是使用canvas,canvas的使用和普通的h5的canvas使用一样,没有什么区别

想使用canvas,首先是要在页面是创建canvas标签,如果只是想要获得图片,可以把canvas定位到页面之外

<canvas style="width: 300px; height: 200px;" canvas-id="myCanvas"></canvas><button bindtap='click'>canvas绘图</button>

然后就在js里控制canvas绘图,具体的绘图方式可以参考微信小程序官方的API部分的绘图

click:function(){  // 使用 wx.createContext 获取绘图上下文 context    let context = wx.createCanvasContext('firstCanvas')    ctx.setFontSize(20);    ctx.setFillStyle('#666');    ctx.fillText('我是测试信息', 30, 40);}

canvas绘图里做一个圆形的图片比较麻烦,因为微信小程序的绘图并没有裁剪图片的API,所以只能曲线去完成,完成的思路是先调用save()方法保存之前的操作,然后画一个圆,再使用微信小程序绘图里的clip() 方法,这个方法会在原来的画布上裁剪任意形状,接下来的操作都只能在这个裁剪的区域内,区域外的操作无效,在完成操作后,再使用restore()方法恢复正常操作。

      ctx.save()      ctx.beginPath()      ctx.arc(100, 100, 25, 0, 2*Math.PI)      ctx.clip()      ctx.drawImage(imagePath, 25, 25)      ctx.restore()      ctx.draw()

在绘制图片时,如果图片不是本地的,地址应该是调用微信的下载图片接口后返回的临时地址

点这里可以跳转到人工智能网站