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

路上的杨柳依然神彩奕奕的低垂着黄绿色的发丝,好像冬天的降温没带给她们多少伤害。我倒感受到她们内心的寒冷,叶子摸着十分冰冷,也缺少了昔日的水分。冬天的到来,摧残了多少无辜的生命,又演绎了多少生命的童话。

本文实例为大家分享了

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="utf-8"/>
  5. <metahttp-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. <canvaswidth="500"height="500"style="border:1pxsolid#555;display:block;margin:0auto;"></canvas>
  13. <script>
  14. vararrow=function(){
  15. this.x=0;
  16. this.y=0;
  17. this.color="#f90"
  18. this.rolation=0;
  19. }
  20. varcanvas=document.querySelector('canvas')
  21. varctx=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. varArrow=newarrow();
  40. Arrow.x=canvas.width/2;
  41. Arrow.y=canvas.height/2;
  42. varc_x,c_y;//相对于canvas坐标的位置;
  43. varisMouseDown=false;
  44. Arrow.draw(ctx)
  45. canvas.addEventListener('mousedown',function(e){
  46. isMouseDown=true;
  47. },false)
  48. canvas.addEventListener('mousemove',function(e){
  49. if(isMouseDown==true){
  50. c_x=getPos(e).x-canvas.offsetLeft;
  51. c_y=getPos(e).y-canvas.offsetTop;
  52. //setInterval(drawFram,1000/60)
  53. requestAnimationFrame(drawFram)
  54. }
  55. },false)
  56. canvas.addEventListener('mouseup',function(e){
  57. isMouseDown=false;
  58. },false)
  59. functiondrawFram(){
  60. vardx=c_x-Arrow.x;
  61. vardy=c_y-Arrow.y;
  62. Arrow.rolation=Math.atan2(dy,dx);
  63. ctx.clearRect(0,0,canvas.width,canvas.height);
  64. Arrow.draw(ctx)
  65. }
  66. functiongetPos(e){
  67. varmouse={x:0,y:0}
  68. varee=e||event;
  69. if(e.pageX||e.pageY){
  70. mouse.x=e.pageX;
  71. mouse.y=e.pageY;
  72. }else{
  73. mouse.x=e.pageX+document.body.scrollLeft+document.document.documentElement.scrollLeft;
  74. mouse.y=e.pageY+document.body.scrollTop+document.document.documentElement.scrollTop;
  75. }
  76. returnmouse;
  77. }
  78. </script>
  79. </body>
  80. </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

您可能有感兴趣的文章
如何使用jTopo给Html5 Canva中绘制的元素添加鼠标事件

纯CSS如何实现鼠标悬停图片上升显示描述案例

HTML标签之!DOCTYPE文档类型声明

如何使用html+css代码如何实现冰墩墩和雪容融效果

html中checkbox与radio样式美化的简单实例