幽灵资源网 Design By www.bzswh.com
利用canvas实现鼠标拖拽功能,当在元素上按下鼠标并移动时,元素跟着鼠标移动。
效果:
主要思路:
当鼠标按下时,用isPointInPath方法判断鼠标位置是否在元素上,如果在则鼠标移动时元素跟着移动;当鼠标抬起时,将鼠标移动事件和抬起事件置空。
代码如下:
<canvas id="can" width="400" height="400"></canvas> <script type="text/javascript"> var can = document.getElementById("can"); var ctx = can.getContext("2d"); //创建圆滑块 function createBlock(a,b){ ctx.beginPath(); ctx.fillStyle = "red"; ctx.arc(a,b,30,0,Math.PI*2); ctx.fill(); } //鼠标按下,将鼠标按下坐标保存在x,y中 createBlock(50,50); can.onmousedown = function(ev){ var e = ev||event; var x = e.clientX; var y = e.clientY; drag(x,y); }; //拖拽函数 function drag(x,y){ // 按下鼠标判断鼠标位置是否在圆上,当画布上有多个路径时,isPointInPath只能判断最后那一个绘制的路径 if(ctx.isPointInPath(x,y)){ //路径正确,鼠标移动事件 can.onmousemove = function(ev){ var e = ev||event; var ax = e.clientX; var ay = e.clientY; //鼠标移动每一帧都清楚画布内容,然后重新画圆 ctx.clearRect(0,0,can.width,can.height); createBlock(ax,ay); }; //鼠标移开事件 can.onmouseup = function(){ can.onmousemove = null; can.onmouseup = null; }; }; } </script>
更多精彩文章请点击专题: Javascript拖拽特效汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,canvas,鼠标拖拽
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...