微信小程序：cavans的使用（一）

梦里梦外; 2022-02-04 09:53 302阅读 0赞

最近用到这个canvas画布这个组件，其实还是挺有意思的。优点是可以给用户绘制宣传海报什么的，这个现在好多小程序都有这个，比如给你一个专属海报有你的头像还有你的二维码，你可以保存在你的相册里，你可以取拿它去拉人。

[微信小程序canvas组件官方文档][canvas]  
[微信小程序canvasAPI官方文档][canvasAPI]  
你直接搜的canvas的时候搜可能会进入到小游戏里面，组件搭配API阅读使用起来更配哦。（组件大概就是属性和demo，而API对应的是如何操作API方法）

这里主要讲demo和API的几个部分的介绍和使用场景，具体的比如如何加载获取网络图片，生成图片的导出，canvas上面如何做适配，canvas上面的字体如何居中准备分开写，这里只写一个最简单的demo，和API的使用介绍。

（一）  
弄一个简单的cavans  
wxml

onReady: function () {
        const ctx = wx.createCanvasContext('zpTest')
    
        ctx.setFillStyle('red')
        ctx.fillRect(10, 10, 150, 100)
        ctx.draw()
        ctx.setFillStyle('black')
        ctx.fillRect(50, 50, 150, 100)
        ctx.draw(true)
      },

这里只是一个演示绘制一个canvas，不一定要放在onReady里面，根据需求来。  
这个draw方法为什么会调用两次？因为是画了两个矩形框，而且后面的draw里面的参数要注意一下，如果是false，你可以试一下。（默认是false，也就是不保存前面画的，如果你是第一个画的无所谓）

(二)API  
一共是7个，但是这几个都有自己的使用场景。  
（1）wx.createCanvasContext，这个你要用来创建上下文环境的，  
a.就好比你不弄块画布，你就没法去画。对应自己定义的canvas，  
b.注意这边人家的要的参数是canvas-id，这个人家微信认为是唯一的标识ID，所以不要把自己定义的id放进去，或者压根就没在canvas里面写canvas-id,这要和别的前端canvas有所区别。

（2）wx.canvasToTempFilePath  
这个是导出画布上的图片，就是你画好了，你想把它导出放在本地就要用到它

（3）wx.canvasPutImageData  
这个没有用过，就是像素数据导出。

（4）wx.canvasGetImageData  
获取canvas区域隐含的数据数据，这个其实还挺有用的，举个例子适配就少不了它，我们导出canvas的长宽进行处理适配，要不然你规定的是像素位置，XXXpx会导致所有大小的屏幕都是这个位置，肯定会出现不居中，偏左偏右等问题。

（5）CanvasContext  
绘图的上下文，你可以把它看成你创建一个画布，你要在上面画画来理解。

（6）CanvasGradient  
渐变对象，他官方文档有例子一看就明白的那种。

（7）Color  
怎么说呢，不算是API就是介绍几种颜色对应的16进制颜色。比如一个“red”鬼知道是什么样的红，但是你说red是\#FF0000，电脑就知道是什么东西了。

[canvas]: https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
[canvasAPI]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.createCanvasContext.html