因为微信小程序暂时没有分享到朋友圈的功能，所以只能生成分享图，然后再发到朋友圈，这就用到了canvas！刚开始写的时候是各种查各种百度，然后也算写了出来，但是现在也觉得不是很明白，就先从用到的API开始整理吧！
canvas画布组件
canvas 标签默认宽度300px、高度225px
canvas 是在一个二维的网格当中,左上角的坐标为(0, 0)。
属性名 类型 默认值 说明
canvas-id String canvas 组件的唯一标识符
disable-scroll Boolean false 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart EventHandle 手指触摸动作开始
bindtouchmove EventHandle 手指触摸后移动
bindtouchend EventHandle 手指触摸动作结束
bindtouchcancel EventHandle 手指触摸动作被打断，如来电提醒，弹窗
bindlongtap EventHandle 手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror EventHandle 当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}
在.wxml文件中
<canvas canvas-id="firstCanvas"></canvas>
在.js文件中
Page({
onReady: function (e) {
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('firstCanvas')
}
})
当页面过长的时候，画出了canvas之后禁止canva滑动设置属性disable-scroll='true'是能禁止canvas滑动，但是不能禁止页面滑动，如果你的canvas大小没有页面大的话，还是会触摸滑动页面的。
<canvas canvas-id="firstCanvas" disable-scroll='true'></canvas>
绘图API
有好多也就不一一列举了就说一些常用的吧
-
setFontSize：设置字体的字号
context.setFontSize(number)
context.font = '40px Arial' // 基础库 1.9.90 起支持 -
fillText：在画布上绘制被填充的文本
context.fillText(string text, number x, number y, number maxWidth)
text:在画布上输出的文本; x:绘制文本的左上角x坐标位置; y:绘制文本的左上角 y 坐标位置; maxWidth:需要绘制的最大宽度，可选. -
setTextAlign：设置文字的对齐
content.setTextAlign(string align)
string align的值：left; center; right
运用：让文字在画布居中显示
context.setFontSize(20)
context.setFillStyle('#fff')
context.setTextAlign('center');
context.fillText('Hello',mobileWidth / 2, 20)
context.draw()
setFillStyle：设置填充色
context.setFillStyle(color)
context.fillStyle = color // 基础库 1.9.90 起支持fill：对当前路径中的内容进行填充。默认的填充色为黑色
context.fill()rect：创建一个矩形
context.rect(矩形路径左上角的x坐标, 矩形路径左上角的y坐标, width, height)
运用：
context.rect(10, 10, 150, 75)
context.setFillStyle('red')
context.fill()
context.draw()
-
fillRect：填充一个矩形
context.fillRect(矩形路径左上角的x坐标, 矩形路径左上角的y坐标, width, height)
运用：
context.setFillStyle('red')
context.fillRect(10, 10, 150, 75)
context.draw()
-
setStrokeStyle：设置描边颜色。
context.setStrokeStyle(color) // 从基础库 1.9.90 开始，本接口停止维护
context.setStrokeStyle='color' // 基础库 1.9.90 起支持 -
strokeRect：画一个矩形(非填充)
context.strokeRect(矩形路径左上角的x坐标, 矩形路径左上角的y坐标, width, height)
运用：
context.setStrokeStyle('red')
context.strokeRect(10, 10, 150, 75)
context.draw()
-
clearRect：清除画布上该矩形区域内的内容
context.clearRect(矩形路径左上角的x坐标, 矩形路径左上角的y坐标, width, height) -
stroke：画出当前路径的边框。默认颜色为黑色
context.stroke() -
beginPath：开始创建一个路径，需要调用fill或者sroke才会使用路径进行填充或描边
context.beginPath() -
closePath：关闭一个路径，关闭路径会链接起点和终点
context.closePath() -
moveTo：把路径移动到画布的指定点，不创建线条
context.moveTo(目标位置的x坐标，目标位置的y坐标) -
lineTo：方法增加一个新点，然后创建一条从上次指定点到目标点的线
context.lineTo(目标位置的x坐标，目标位置的y坐标)
运用：
context.moveTo(10,10)
context.rect(10,10,100,50)
context.lineTo(110,60)
context.stroke()
context.draw()
moveTo和lineTo用stroke()方法来画线条
-
translate 对当前坐标系的原点(0, 0)进行变换，默认的坐标系原点为页面左上角
context.translate(水平坐标平移量，竖直坐标平移量) -
arc： 画一条弧线，创建一个圆可以用arc()方法指定起始弧度为0，终止弧度为2*Math.PI
context.arc(x,y,r,sAngle,eAngle,counterclockwise)
x：圆的x坐标；y：圆的y坐标；r：圆的半径；sAngle：起始弧度，单位弧度（在3点钟方向）
eAngle：终止弧度；counterclockwise:指定弧度的方向是逆时针还是顺时针。Boolean类型，默认是false即是顺时针 -
clip：从原始画布中剪切任意形状和尺寸
context.clip() - drawImage：绘制图像到画布
三种写法：
context.drawImage(imageResource, dx, dy)
context.drawImage(imageResource, dx, dy, dWidth, dHeight)
context.drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持
imageResource:图片资源(不能是本地图片，需要wx.downloadFile(Object object)下载的路径); dx:图像的左上角在目标 canvas 上 x 轴的位置; dy:图像的左上角在目标 canvas 上 y 轴的位置; dWidth:绘制图像的宽度; dHeight:绘制图像的高度; sx:源图像的矩形选择框的左上角 x 坐标; sy:源图像的矩形选择框的左上角 y 坐标; sWidth:源图像的矩形选择框的宽度; sHeight:源图像的矩形选择框的高度;
-
save：保存绘图上下文
content.save() -
restore：恢复之前保存的绘图上下文
content.restore()
save和restore方法必须是配对使用的，restore方法前必须有save方法，不然会报Underflow in restore错误。
save表示保存sava函数之前的状态，restore表示获取save保存的状态
-
draw：将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
content.draw()
运用：绘制一个圆的图片
content.save()
content.beginPath()
content.arc(50, 50, 25, 0, 2 * Math.PI)
content.clip()
content.drawImage(url, 25, 25)
content.restore()
content.draw()
用clip方法一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过restore方法对其进行恢复。
