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

HTML / CSS 相关文章推荐
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
Html5与App的通讯方式详解
Oct 24 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
You might like
用PHP实现维护文件代码
2007/06/14 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
PHP如何将XML转成数组
2016/04/04 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
Python实现中一次读取多个值的方法
2018/04/22 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
如何使用python写截屏小工具
2020/09/29 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
宣传口号大全
2014/06/16 职场文书
村级个人对照检查材料
2014/08/22 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏