Simple application of the WeChat applet canvas component

source code

index.html

<view class="container">
<view class="canvas_area">
<canvas canvas-id="myCanvas" class="myCanvas"
disable-scroll="false"
bindtouchstart="touchStart"
bindtouchmove="touchMove"
bindtouchend="touchEnd">
</canvas>
</view>
<view class="canvas_tools">
<view class="box box1" bindtap="penSelect" data-param="5"></view>
<view class="box box2" bindtap="penSelect" data-param="15"></view>
<view class="box box3" bindtap="colorSelect" data-param="#cc0033"></view>
<view class="box box4" bindtap="colorSelect" data-param="#ff9900"></view>
<view class="box box5" bindtap="clearCanvas"></view>
</view>
</view>

finger swipe code

//Start the finger touch action
touchStart: function (e) {
// get the coordinates of the touch point
this.startX = e.changedTouches[0].x
this.startY = e.changedTouches[0].y
this.context = wx.createContext()
if(this.isClear){ //Determine whether the eraser function is enabled ture means clearing false means drawing
this.context.setStrokeStyle('#F8F8F8') //Set the line style here to the background color of the canvas. The principle of the eraser is to use the erased area to be filled with the same background color of the canvas to achieve the effect of the eraser
this.context.setLineCap('round') //Set the style of the line endpoints
this.context.setLineJoin('round') //Set the style of the intersection of two lines
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跟<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

Simple application of the WeChat applet canvas component

Guess you like