最近用到这个canvas画布这个组件，其实还是挺有意思的。优点是可以给用户绘制宣传海报什么的，这个现在好多小程序都有这个，比如给你一个专属海报有你的头像还有你的二维码，你可以保存在你的相册里，你可以取拿它去拉人。
微信小程序canvas组件官方文档
微信小程序canvasAPI官方文档
你直接搜的canvas的时候搜可能会进入到小游戏里面，组件搭配API阅读使用起来更配哦。（组件大概就是属性和demo，而API对应的是如何操作API方法）
这里主要讲demo和API的几个部分的介绍和使用场景，具体的比如如何加载获取网络图片，生成图片的导出，canvas上面如何做适配，canvas上面的字体如何居中准备分开写，这里只写一个最简单的demo，和API的使用介绍。
（一）
弄一个简单的cavans
wxml
<canvas canvas-id='zpTest'></canvas>
js
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，电脑就知道是什么东西了。