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 相关文章推荐
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
vue 实现锚点功能操作
Aug 10 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
PHP入门速成(2)
2006/10/09 PHP
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
如何使用PHP往windows中添加用户
2006/12/06 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
js 操作符汇总
2014/11/08 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python在线运行代码助手
2016/07/15 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
python hough变换检测直线的实现方法
2019/07/12 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
康拓普公司Java笔面试
2016/09/23 面试题
你们项目是如何进行变更控制的
2015/08/26 面试题
面包店的创业计划书范文
2014/01/16 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
个人委托书范本
2014/04/02 职场文书
地质灾害防治方案
2014/05/14 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
推普标语口号大全
2015/12/26 职场文书