微信小程序canvas组件简单运用之涂鸦[小鱼微信小程序]

微信小程序canvas组件简单运用之涂鸦由小鱼微信小程序精心整理,并分享给大家。喜欢该资源的小伙伴请下载使用,注册、回复、每日签到、点赞送大量积分,满足您免费下载的愿望

作者:whitehy ,来自原文地址
index.html

<view class="container">     <!--画布区域-->     <view class="canvas_area">         <!--注意:同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作-->         <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>

手指滑动代码

[AppleScript]
//手指触摸动作开始   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跟<canvas/>不存在对应关系,一个context生成画布的绘制动作数组可以应用于多个<canvas/>       wx.drawCanvas({          canvasId: 'myCanvas',          reserve: true,          actions: this.context.getActions() // 获取绘图动作数组       })   }

以上是一部分代码展示,下面做核心原理说明:
1、能画出不同颜色的线条 主要是以下三个方法 setStrokeStyle(画笔的颜色) moveTo(把路径移动到画布中的指定点,但不创建线条) lineTo(添加一个新点,然后在画布中创建从该点到最后指定点的线条) 这样就可以从A点坐标到B点坐标 画出不同颜色的线条啦!!!
2、橡皮擦的原理:之所以能擦掉画布上的图像就是通过把要擦掉的区域绘制成与画布一样的颜色 这样就可以”欺骗”自己的眼睛 达到橡皮擦的效果啦!!!

微信小程序canvas组件简单运用之涂鸦

源码下载:

微信小程序canvas组件简单运用之涂鸦 dever-undefined graffiti.zip (189.09 KB, 下载次数: 132)

小鱼源码网www.51xyyx.com

轻松一刻:

海龟酒量高,某天喝醉了,朋友问:你怎么还会喝醉?海龟答:唉,章鱼那孙子非要和爷划拳,丫的,那么多手,看都看不过来,真是输惨了!
 下载地址
登录  查看下载地址。

提示:注册,评论,每日签到,点赞可获得积分。

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 2805477110@qq.com

周一至周六,8:00-21:00,节假日休息
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
切换注册

登录

忘记密码 ?

切换登录

注册