首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

html5 canvas实现跟随鼠标旋转的箭头

Posted in HTML / CSS onMarch 11, 2016

本文实例为大家分享了

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>    
  4.   <meta charset="utf-8" />    
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />    
  6.   <title>canvas实现跟随鼠标旋转的箭头</title>    
  7.   <style>  
  8.     *{padding: 0;margin: 0}   
  9.     </style>    
  10.  </head>    
  11.  <body>    
  12.   <canvas width="500" height="500" style="border: 1px solid #555; display: block;margin: 0 auto;"></canvas>    
  13.   <script>  
  14.         var arrow=function () {   
  15.             this.x=0;    
  16.             this.y=0;   
  17.             this.color="#f90"  
  18.             this.rolation=0;   
  19.         }    
  20.         var canvas=document.querySelector('canvas')   
  21.         var ctx=canvas.getContext('2d');   
  22.         arrow.prototype.draw=function (ctx) {   
  23.             ctx.save();   
  24.             ctx.translate(this.x,this.y);   
  25.             ctx.rotate(this.rolation)   
  26.             ctx.fillStyle=this.color;   
  27.             ctx.beginPath();   
  28.             ctx.moveTo(0, 15);   
  29.             ctx.lineTo(-50, 15);   
  30.             ctx.lineTo(-50, -15);   
  31.             ctx.lineTo(0,-15);   
  32.             ctx.lineTo(0,-35);   
  33.             ctx.lineTo(50,0);   
  34.             ctx.lineTo(0,35);   
  35.             ctx.closePath()   
  36.             ctx.fill();   
  37.             ctx.restore();   
  38.         }   
  39.         var Arrow=new arrow();   
  40.         Arrow.x=canvas.width/2;   
  41.         Arrow.y=canvas.height/2;   
  42.            
  43.         var c_x,c_y; //相对于canvas坐标的位置；   
  44.         var isMouseDown=false;   
  45.         Arrow.draw(ctx)   
  46.         canvas.addEventListener('mousedown',function(e) {   
  47.             isMouseDown=true;   
  48.         },false)   
  49.         canvas.addEventListener('mousemove',function(e) {   
  50.             if(isMouseDown==true){   
  51.                 c_x=getPos(e).x-canvas.offsetLeft;   
  52.                 c_y=getPos(e).y-canvas.offsetTop;   
  53.                 //setInterval(drawFram,1000/60)   
  54.                 requestAnimationFrame(drawFram)   
  55.             }   
  56.         },false)   
  57.         canvas.addEventListener('mouseup',function(e) {   
  58.             isMouseDown=false;   
  59.         },false)   
  60.         function drawFram(){   
  61.             var dx=c_x-Arrow.x;   
  62.             var dy=c_y-Arrow.y;   
  63.             Arrow.rolation=Math.atan2(dy,dx);   
  64.             ctx.clearRect(0,0,canvas.width,canvas.height);   
  65.             Arrow.draw(ctx)   
  66.         }   
  67.         function getPos(e) {   
  68.             var mouse={x:0,y:0}   
  69.             var ee=e||event;   
  70.         
  71.             if(e.pageX||e.pageY){   
  72.                 mouse.x=e.pageX;   
  73.                 mouse.y=e.pageY;   
  74.             }else{   
  75.                 mouse.x=e.pageX+document.body.scrollLeft+document.document.documentElement.scrollLeft;   
  76.                 mouse.y=e.pageY+document.body.scrollTop+document.document.documentElement.scrollTop;   
  77.             }   
  78.             return mouse;   
  79.         }   
  80.     </script>     
  81.  </body>  
  82. </html>  

DEMO地址：http://codepen.io/jonechen/pen/eZpgWd

不废话，直接上DEMO了，这个效果实现起来并不复杂，但是麻雀随小，五脏俱全，主要涉及到的知识点有：

1、canvas的基本绘图；
2、js各个事件的监听；
3、js动画；
4、三角函数结合js在canvas中的基本应用；

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/jone-chen/p/5243439.html

html5 canvas实现跟随鼠标旋转的箭头

- Author -

Jone_chen

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3教程(6):创建网站多列
Apr 02 HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
css3弹性盒模型（Flexbox）详细介绍
Oct 08 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
Mar 27 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 #HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 #HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 #HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 #HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 #HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 #HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 #HTML / CSS
游标(1) GTID(1) props(1) ip连接(1) ECharts(3) 表变量(1) 临时表(1) postcss-px2rem(1) mixin(1) ref(1)
You might like
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
使用URL传输SESSION信息
2015/07/14 PHP
浅谈PHP的反射机制
2016/12/15 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
Python实现国外赌场热门游戏Craps（双骰子）
2015/03/31 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
python 文件查找及内容匹配方法
2018/10/25 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
django fernet fields字段加密实践详解
2019/08/12 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
如何基于Python实现自动扫雷
2020/01/06 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
Smallable英国家庭概念店：设计师童装及家居装饰
2017/07/05 全球购物
Lookfantastic葡萄牙官方网站：欧洲第一大化妆品零售商
2018/03/17 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
我的求职计划书
2014/01/10 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
职业生涯规划书范文
2014/03/10 职场文书
作风建设年活动总结
2014/08/27 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis