利用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,鼠标拖拽
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“javascript利用canvas实现鼠标拖拽功能”评论...
更新动态
2024年04月29日
2024年04月29日
- 4.6版本隐藏锚点位置一览,隐藏锚点在哪
- 群星.2024-追风者电视剧影视原声带【SONY】【FLAC分轨】
- 曾庆瑜.1992-18首中英文经典全集【派森】【WAV+CUE】
- 群星.1991-华纳浪漫心曲精丫华纳】【WAV+CUE】
- 幕府将军 Shogun
- 纳克鲁斯 Knuckles
- 特污兔《填空题》[FLAC/分轨][239.68MB]
- 陈奕迅《黑白灰》台湾版[WAV+CUE][400M]
- 群星《三大发烧女声》3CD[WAV+CUE][2G]
- 英雄传说闪之轨迹北方战役国际版 5月29日全球同步上市
- 仙剑世界风启测试定档5月31日 感受属于东方的浪漫幻想世界
- 元气骑士前传星界法师怎么玩 操控黑暗禁忌
- 物华弥新迷踪盘第二关怎么过 迷踪盘第二关通关方法
- 物华弥新迷踪盘第三关怎么过 迷踪盘第三关通关方法
- 物华弥新迷踪盘第四关怎么过 迷踪盘第四关通关方法