javascript利用canvas实现鼠标拖拽功能


Posted in Javascript onJuly 23, 2020

利用canvas实现鼠标拖拽功能,当在元素上按下鼠标并移动时,元素跟着鼠标移动。

效果:

javascript利用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拖拽特效汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
js转义字符介绍
Nov 05 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
Vue获取微博授权URL代码实例
Nov 04 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 #Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 #Javascript
JS前后端实现身份证号验证代码解析
Jul 23 #Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 #Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 #Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 #Javascript
javascript递归函数定义和用法示例分析
Jul 22 #Javascript
You might like
php小偷相关截取函数备忘
2010/11/28 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
JS常用算法实现代码
2016/11/14 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Python异常处理总结
2014/08/15 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
Python实现计算最小编辑距离
2016/03/17 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
在线课程:Skillshare
2019/04/02 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
双方协议书
2014/04/22 职场文书
出租车拒载检讨书
2015/01/28 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
创业计划书之养殖业
2019/10/11 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
yolov5返回坐标的方法实例
2022/03/17 Python