html5 canvas实现跟随鼠标旋转的箭头_html5教程技巧

本文实例为大家分享了

XML/HTML Code复制内容到剪贴板

1. /span>>
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;
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;
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