原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处
在之前的小程序canvas开发的回复中,有人问能不能实现滑动,我想应该就是canvas事件的处理,因为手册上没有这一块的案例,我看了一下网上也没有讲这一块的,所以我也没试过,所以就开了这一个话题,带大家看看canvas的事件处理
首先前面布局<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" bindtouchstart='alert'></canvas>
这里我是直接用的上次的代码,多绑定了一个触摸开始的事件,这里可以参考文档来根据需求绑定不同事件,然后我们在js文件中来拿到这个事件所对应的函数
alert:function(ev){
var ev=ev||event;
console.log(ev);
}
通过输出获取的当前事件里的所有内容我们可以看到
一个个点开看,我们会在touches里发现
然后我们会从0:Object里发现我们所要的
我们所需要的就是获取道德X与Y值,这样的话我们就可以
alert:function(ev){
var ev=ev||event;
console.log(ev.touches[0].x);
}
这里我们通过点击屏幕,就获取到了当前不同的X值,Y值的原理相同
如果我们想在canvas上做画线处理,思路就是设置一个定时器,不停将获取到的X,Y值传到page的data里,然后再把参数传入lineTo()来绘制我们想要的图形,别忘了在绘制路径时需要开启路径O beginPath()
closePath()
最后关闭
完结撒花,如果还有什么问题,可以在下方回复,或者在群里私聊我,我现在不怎么写小程序,因为我现在还在学小程序的UI。。。。。哈哈哈哈,作为学生党,平时课很多,在俱乐部的时间不会很多,所以还是建议从群私聊我问问题~