微信小程序canvas

因为微信小程序暂时没有分享到朋友圈的功能，所以只能生成分享图，然后再发到朋友圈，这就用到了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方法对其进行恢复。