微信小程序canvas重绘怎么弄?
微信小程序可以利用canvas实现图标绘制的功能，也能让小程序页面更加丰富多彩，但是如果绘制的效果不好怎么办呢?那可能就需要微信小程序canvas重绘了，也就是将绘制的图擦掉重新绘制。以下是具体的操作方法。
先来看看重绘效果图：
实现canvas重绘的小程序源码：
index.html
disable-scroll="false"
bindtouchstart="touchStart"
bindtouchmove="touchMove"
bindtouchend="touchEnd">
手指滑动代码
//手指触摸动作开始
touchStart: function (e) {
//得到触摸点的坐标
this.startX = e.changedTouches[0].x
this.startY = e.changedTouches[0].y
this.context = wx.createContext()
if(this.isClear){ //判断是否启用的橡皮擦功能 ture表示清除 false表示画画
this.context.setStrokeStyle('#F8F8F8') //设置线条样式 此处设置为画布的背景颜色 橡皮擦原理就是：利用擦过的地方被填充为画布的背景颜色一致 从而达到橡皮擦的效果
this.context.setLineCap('round') //设置线条端点的样式
this.context.setLineJoin('round') //设置两线相交处的样式
this.context.setLineWidth(20) //设置线条宽度
this.context.save(); //保存当前坐标轴的缩放、旋转、平移信息
this.context.beginPath() //开始一个路径
this.context.arc(this.startX,this.startY,5,0,2*Math.PI,true); //添加一个弧形路径到当前路径，顺时针绘制 这里总共画了360度 也就是一个圆形
this.context.fill(); //对当前路径进行填充
this.context.restore(); //恢复之前保存过的坐标轴的缩放、旋转、平移信息
}else{
this.context.setStrokeStyle(this.data.color)
this.context.setLineWidth(this.data.pen)
this.context.setLineCap('round') // 让线条圆润
this.context.beginPath()
}
},
//手指触摸后移动
touchMove: function (e) {
var startX1 = e.changedTouches[0].x
var startY1 = e.changedTouches[0].y
if(this.isClear){ //判断是否启用的橡皮擦功能 ture表示清除 false表示画画
this.context.save(); //保存当前坐标轴的缩放、旋转、平移信息
this.context.moveTo(this.startX,this.startY); //把路径移动到画布中的指定点，但不创建线条
this.context.lineTo(startX1,startY1); //添加一个新点，然后在画布中创建从该点到最后指定点的线条
this.context.stroke(); //对当前路径进行描边
this.context.restore() //恢复之前保存过的坐标轴的缩放、旋转、平移信息
this.startX = startX1;
this.startY = startY1;
}else{
this.context.moveTo(this.startX, this.startY)
this.context.lineTo(startX1, startY1)
this.context.stroke()
this.startX = startX1;
this.startY = startY1;
}
//只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个
wx.drawCanvas({
canvasId: 'myCanvas',
reserve: true,
actions: this.context.getActions() // 获取绘图动作数组
})
}
微信小程序canvas重绘的核心原理说明：
1、能利用小程序canvas画出线条，而且是不同颜色，主要有三个方法——setStrokeStyle(画笔颜色) moveTo(路径移动到画布中某个指定点) lineTo(添加新点，然后创建从该点到指定点的线条)这样就可以从两个不同的坐标之间画出不同颜色的线条啦!!!
2、小程序橡皮擦的原理：通过把要擦掉的区域绘制成与画布一样的颜色就可以达到橡皮擦的效果，其实就是换一种方式“欺骗”自己的眼睛~
看完以上资料，大家对微信小程序canvas重绘都了解了吗?具体实现后的小程序效果、开发代码以及实现重绘的原理，小编在文中都已经介绍得非常清楚了，持续关注微信小程序商店，大家还能获取更多实用资料哦。
微信小程序canvas图表怎么绘制?
微信小程序canvas滑动的代码及效果
小程序卡片左右滑动怎么实现?