首页
所有分类
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 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 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
group by(1) 查询效率(1) Hadoop(1) 表结构(1) delete in(1) REGEXP(1) 九宫格(5) 控制流(1) Simhash(1) 字段分割(1)
You might like
ip签名探针
2006/10/09 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
php数组分页实现方法
2016/04/30 PHP
javascript 写类方式之二
2009/07/05 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
js中document.write的那点事
2014/12/12 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
js实现3D旋转效果
2020/08/18 Javascript
九步学会Python装饰器
2015/05/09 Python
Python安装第三方库的3种方法
2015/06/21 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
django中的图片验证码功能
2019/09/18 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
Python虚拟环境venv用法详解
2020/05/25 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
照片礼物和装饰：MyPhoto
2019/11/02 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
二年级学生评语大全
2014/04/23 职场文书
负责人任命书范本
2014/06/04 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
解决golang 关于全局变量的坑
2021/05/06 Golang