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 相关文章推荐
超酷炫 CSS3垂直手风琴菜单
Jun 28 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 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巧获服务器端信息
2006/12/06 PHP
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
PHP中的Memcache详解
2014/04/05 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
js实现简易计算器功能
2019/10/18 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
进一步理解Python中的函数编程
2015/04/13 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
Python autoescape标签用法解析
2020/01/17 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
中秋节礼品促销方案
2014/02/02 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技