怎么用微信小程序的canvas组进行涂鸦

本篇内容介绍了“怎么用微信小程序的canvas组进行涂鸦”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

核心原理说明：

　　1、能画出不同颜色的线条 主要是以下三个方法 setStrokeStyle(画笔的颜色) moveTo(把路径移动到画布中的指定点，但不创建线条) lineTo(添加一个新点，然后在画布中创建从该点到最后指定点的线条) 这样就可以从A点坐标到B点坐标 画出不同颜色的线条啦!!!

　　2、橡皮擦的原理：之所以能擦掉画布上的图像就是通过把要擦掉的区域绘制成与画布一样的颜色 这样就可以”欺骗”自己的眼睛 达到橡皮擦的效果啦!!!

　　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() // 获取绘图动作数组

　　})

　　}

　　复制代码

　　以上是一部分代码展示，下面做核心原理说明：

　　1、能画出不同颜色的线条 主要是以下三个方法 setStrokeStyle(画笔的颜色) moveTo(把路径移动到画布中的指定点，但不创建线条) lineTo(添加一个新点，然后在画布中创建从该点到最后指定点的线条) 这样就可以从A点坐标到B点坐标 画出不同颜色的线条啦!!!

　　2、橡皮擦的原理：之所以能擦掉画布上的图像就是通过把要擦掉的区域绘制成与画布一样的颜色 这样就可以”欺骗”自己的眼睛 达到橡皮擦的效果啦!!!

“怎么用微信小程序的canvas组进行涂鸦”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！