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实现图片轮播效果代码
Sep 03 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
Javascript事件实例详解
Nov 06 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
VUE注册全局组件和局部组件过程解析
Oct 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
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
python处理csv数据的方法
2015/03/11 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Python 绘制可视化折线图
2020/07/22 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
学校评语大全
2014/05/06 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
顶岗实习计划书
2015/01/16 职场文书
民事辩护词范文
2015/05/21 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
禁毒心得体会范文
2016/01/15 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle
java实现面板之间切换功能
2022/06/10 Java/Android