微信小程序canvas组件简单运用之涂鸦
源码
index.html
<viewclass="container">
<!--画布区域-->
<viewclass="canvas_area">
<!--注意：同一页面中的canvas-id不可重复，如果使用一个已经出现过的canvas-id，该canvas标签对应的画布将被隐藏并不再正常工作-->
<canvascanvas-id="myCanvas"class="myCanvas"
disable-scroll="false"
bindtouchstart="touchStart"
bindtouchmove="touchMove"
bindtouchend="touchEnd">
</canvas>
</view>
<!--画布工具区域-->
<viewclass="canvas_tools">
<viewclass="boxbox1"bindtap="penSelect"data-param="5"></view>
<viewclass="boxbox2"bindtap="penSelect"data-param="15"></view>
<viewclass="boxbox3"bindtap="colorSelect"data-param="#cc0033"></view>
<viewclass="boxbox4"bindtap="colorSelect"data-param="#ff9900"></view>
<viewclass="boxbox5"bindtap="clearCanvas"></view>
</view>
</view>
手指滑动代码
//手指触摸动作开始
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){
varstartX1=e.changedTouches[0].x
varstartY1=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跟<canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<canvas/>
wx.drawCanvas({
canvasId:'myCanvas',
reserve:true,
actions:this.context.getActions()//获取绘图动作数组
})
}
以上是一部分代码展示，下面做核心原理说明：
1、能画出不同颜色的线条主要是以下三个方法setStrokeStyle（画笔的颜色）moveTo（把路径移动到画布中的指定点，但不创建线条）lineTo（添加一个新点，然后在画布中创建从该点到最后指定点的线条）这样就可以从A点坐标到B点坐标画出不同颜色的线条啦！！！
2、橡皮擦的原理：之所以能擦掉画布上的图像就是通过把要擦掉的区域绘制成与画布一样的颜色这样就可以”欺骗”自己的眼睛达到橡皮擦的效果啦！！！
源码链接请戳：http://bbs.jointforce.com/topic/24201