小程序绘图组件
属性canvas-id canvas组件的唯一标示码，disable-scroll在canvas中移动时绑定手势事件禁止屏幕滚动以及下拉刷新，bindtouchstart手指触摸开始，bindtouchmove手指触摸后移动，bindtouchend手指触摸结束，bindtouchcancel手指触摸被打断如电话弹窗，bindlongtap手指触摸被打断，binderror发生错误时触发的事件
<canvas canvas-id="myCanvas" style="border: 1px solid;100vw;height:50vh;box-sizing:border-box;"/>
小程序绘图API
介绍
//创建canvas的上下文对象
const ctx = wx.createCanvasContext('myCanvas')
//绘图上下文进行绘图描绘
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
//画图
ctx.draw()
canvas坐标系
左上角的坐标为（0,0）点
<canvas canvas-id="myCanvas" style="margin: 5px; border:1px solid #d3d3d3;"
bindtouchmove="move"/>
<view>
Coordinates: ({{x}}, {{y}})
</view>
data: {
x: 0,
y: 0
},
move: function (e) {
this.setData({
x: e.touches[0].x,
y: e.touches[0].y
})
},
渐变
渐变能用于填充一个矩形，圆，线，文字等，填充色可以不固定位固定一种颜色
绘制线性渐变
//创建线性渐变对象
const grd = ctx.createLinearGradient(0, 0, 200, 0)
//设置开始到结束的渐变颜色
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')
// 设置渐变颜色
ctx.setFillStyle(grd)
//绘制一个长方形
ctx.fillRect(10, 10, 150, 80)
//画图
ctx.draw()
绘制圆形渐变
//创建圆形渐变对象
const grd = ctx.createCircularGradient(75, 50, 30)
//设置渐变的起始颜色
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')
// 设置渐变颜色
ctx.setFillStyle(grd)
// 绘制一个长方形
ctx.fillRect(10, 10, 150, 80)
//画图
ctx.draw()
绘图颜色
在canvas中可以使用下面几种方式的颜色。rgb如rgb（0,0,0），rgba如rgba（0,0,0,0.2），16进制颜色如#666666，预定义颜色如red
绘图上下文
wx.createCanvasContext(canvasId)创建绘图的canvas上下文。
导出图片
wx.canvasToTempFilePath()把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。参数x画布x轴的起点，y画布y轴的起点，width画布的宽度，height画布的高度，destWidth输出图片的宽度，destHeight输出图片的高度，canvasId画布标识，fileType目标文件类型，quality图片质量，succ...
设置填充样式
ctx.setFillStyle()。默认为block
线条样式
ctx.setStrokeStyle()。默认为block
设置阴影样式
ctx.setShadow()。参数offsetX水平方向的偏移距离，offsetY竖直方向的偏移距离，blur阴影模糊级别0~100，color阴影颜色
创建线性渐变
ctx.createLinearGradient()。需要使用addColorStop()来指定渐变点至少两个。参数x0起点x轴左边，y0起点y轴坐标，x1终点x轴坐标，y1终点y轴坐标。
创建圆形渐变
ctx.createCircularGradient()。需要使用addColorStop()来指定渐变点至少两个。参数x圆心点x轴的坐标，y圆心点y轴的坐标，r圆的半径
创建颜色渐变点
渐变对象.addColorStop()。参数stop0~1表示渐变的起点或者终点位置，color渐变的颜色
设置线条宽度
ctx.setlineWidth()。参数lineWidth线条的宽度
设置线条端点样式
ctx.setLineGap()。参数lineGap结束端点样式值范围‘butt’，‘round’，‘square’
设置交点样式
ctx.setLineJoin()。参数lineJoin线条交点的样式范围‘bevel’，‘round’，‘miter’
设置最大倾斜
ctx.setMiterLimit()。参数miterLimit最大倾斜的长度
创建矩形
ctx.rect()。参数x矩形的左上角的x轴坐标，y矩形的左上角y轴坐标，width矩形的宽，height矩形的高
填充矩形
ctx.fillRect()。参数x矩形的左上角的x轴的坐标，y矩形的左上角y轴的坐标，width矩形的宽，height矩形的高
画一个矩形
ctx.strokeRect()。参数x矩形的左上角的x轴的坐标，y矩形的左上角y轴的坐标，width矩形的宽，height矩形的高
清除画布上的内容
ctx.clearRect()。参数x矩形左上角的坐标，y矩形左上角的y轴的坐标，width矩形的宽，height矩形的高
绘图路径
ctx.fill()。颜色默认为黑色
描边路径
ctx.strok().颜色默认为黑色
开始路径
ctx.beginPath()
结束路径
ctx.closePath()
移动画笔点
ctx,moveTo()。参数x目标位置x坐标，y目标位置y坐标
增加一个新点
ctx.lineTo()。参数x目标位置的x坐标，y目标位置的y坐标
画圆弧
ctx,arc()。参数x圆的x坐标，y圆的y坐标，r圆的半径，sAngle其实弧度，eAngle终止弧度，counterclockwise顺时针还是逆时针
二次方贝塞尔曲线
ctx.quadraticCurveTo()。参数cpx贝塞尔控制点的x轴坐标，cpy贝塞尔控制点的y坐标，x结束点的坐标x，y结束点的坐标y
三次方贝赛尔曲线
ctx.bezierCurveTo()。参数cp1x第一个贝塞尔控制点的x坐标，cp1y第一个贝塞尔控制点的y坐标，cp2x第二个贝塞尔控制点的x坐标，cp2y第二个贝塞尔控制点的y坐标，x结束点x坐标，y结束点y坐标
缩放
ctx.scale()。参数scaleWidth横轴坐标缩放倍数，scaleHeight纵轴坐标缩放倍数
旋转
ctx.rotate()。参数rotate旋转的角度
平移
ctx.translate()。参数x水平偏移量，y竖直偏移量
设置字号
ctx.setFontSize()。参数fontSize设置字号的大小
绘制文本
ctx.fillText()。参数text输出文本，x绘制文本的左上角x轴位置，y绘制文本的左上角y轴的位置
文字对齐
ctx.setTextAlifn()。参数align对齐方式
文字水平对齐
ctx.setTextBaseLine()。参数string水平对齐方式
绘制图像
ctx.drawImage()。参数imageResouce图片资源地址，x图像左上角的x坐标，y图像左上角y坐标，width图片宽度，height图片高度
设置画笔透明度
ctx.setGlobalAlpha()。参数alpha透明度0~1之间
保存/恢复
ctx.save()保存当前绘图上下文。
ctx.restore()恢复之前的绘图上下文。
绘图
ctx.draw()。参数reserve是否接着上一次继续绘制，callback绘制完成的回调
合成操作
ctx.globalConpositeOperation()。参数type使用哪种混合模式操作
绘制圆弧
ctx.arcTo()。参数x1第一个控制点的x轴坐标，y1第一个控制点的y轴坐标，x2,第二个控制点的x轴坐标，y2第二个控制点的y轴坐标，radius圆弧的半径
文本描边
ctx.strokeText()。参数text要绘制的文本，x文本的起始点x轴坐标，y文本起始点y轴坐标，maxWidth绘制的最大宽度
设置虚线偏移量
ctx.lineDashOffset()。参数value偏移量
图像重复
ctx.createPattern()。参数image重复图像源，repetition如何重复图像