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 相关文章推荐
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
jquery动态添加option示例
Dec 30 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
js实现select跳转功能代码
Oct 22 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
实例分析js事件循环机制
Dec 13 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 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电台频率大全 - 24 贵州省
2020/03/11 无线电
php采集速度探究总结(原创)
2008/04/18 PHP
跟我学Laravel之路由
2014/10/15 PHP
php实现学生管理系统
2020/03/21 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
javascript与CSS复习(三)
2010/06/29 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
python实现划词翻译
2020/04/23 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
中软Java笔试题
2012/11/11 面试题
歌唱比赛主持词
2014/03/18 职场文书
护理专业自荐书
2014/06/04 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
利用python做表格数据处理
2021/04/13 Python