教你将微信小程序画布组涂鸦

核心原则描述：

1，可以绘制不同颜色的线条主要是以下三种方法setStrokeStyle（刷色）moveTo（将路径移动到画布中的指定点，但不要创建一条线）lineTo（添加一个新点，然后在中创建）画布从这一点到最后一个指定点的线）这样你可以画出从A点坐标到B点坐标的不同颜色的线!

2，橡皮擦的原理：你可以在画布上擦除图像的原因是要画出与被擦除区域相同的画布颜色，这样你就可以“欺骗”你的眼睛来达到橡皮擦的效果！/P>

的index.html

禁用滚动='假'

Bindtouchstart='touchStart'

Bindtouchmove='touchMove'

Bindtouchend='touchEnd' ＆GT;

复制代码

手指滑动代码

//手指触摸动作开始

touchStart:函数（e）{

//获取触摸点的坐标

this.startX=e.changedTouches [0] .x

this.startY=e.changedTouches [0] .y

This.context=wx.createContext（）

If（this.isClear）{//确定是否启用了橡皮擦功能ture意味着清除错误的方式来绘制

this.context.setStrokeStyle（'＃F8F8F8'）//设置线条样式。这是画布的背景颜色。橡皮擦的原理是使用擦除区域填充画布的背景颜色来实现橡皮擦的效果。 p>

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，真正的）; //向当前路径添加弧形路径，顺时针绘制以绘制总共360度。轮

This.context.fill（）; //填写当前路径

This.context.restore（）; //恢复先前保存的轴的缩放，旋转和平移信息

}否则{

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意味着清除错误的方式来绘制

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;

}否则{

this.context.moveTo（this.startX，this.startY）

this.context.lineTo（startX1，startY1）

This.context.stroke（）

this.startX=startX1;

this.startY=startY1;

}

//只是用于记录方法调用的容器，用于生成记录绘制行为的动作数组。上下文和上下文之间没有对应关系。绘制画布的上下文可以应用于多个实例。

wx.drawCanvas（{

canvasId:'myCanvas'，

保留:为真，

操作: this.context.getActions（）//获取绘图操作数组

}）

}

复制代码

以上是代码显示的一部分，核心原理解释如下：

1，可以绘制不同颜色的线条主要是以下三种方法setStrokeStyle（刷色）moveTo（将路径移动到画布中的指定点，但不要创建一条线）lineTo（添加一个新点，然后在中创建）画布从这一点到最后一个指定点的线）这样你可以画出从A点坐标到B点坐标的不同颜色的线!

2，橡皮擦的原理：你可以在画布上擦除图像的原因是要画出与被擦除区域相同的画布颜色，这样你就可以“欺骗”你的眼睛来达到橡皮擦的效果！/P>

以上是如何使用微信小程序的canvas组来涂鸦所有内容，大家都学会了？更多小程序开发入门。

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。