本文实例为大家分享了

XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>   <html>    <head>       <meta charset="utf-8" />       <meta http-equiv="X-UA-Compatible" content="IE=edge" />       <title>canvas实现跟随鼠标旋转的箭头</title>       <style>       *{padding: 0;margin: 0}        </style>      </head>      <body>       <canvas width="500" height="500" style="border: 1px solid #555; display: block;margin: 0 auto;"></canvas>       <script>           var arrow=function () {                this.x=0;                 this.y=0;                this.color="#f90"               this.rolation=0;            }             var canvas=document.querySelector(canvas)            var ctx=canvas.getContext(2d);            arrow.prototype.draw=function (ctx) {                ctx.save();                ctx.translate(this.x,this.y);                ctx.rotate(this.rolation)                ctx.fillStyle=this.color;                ctx.beginPath();                ctx.moveTo(0, 15);                ctx.lineTo(-50, 15);                ctx.lineTo(-50, -15);                ctx.lineTo(0,-15);                ctx.lineTo(0,-35);                ctx.lineTo(50,0);                ctx.lineTo(0,35);                ctx.closePath()                ctx.fill();                ctx.restore();            }            var Arrow=new arrow();            Arrow.x=canvas.width/2;            Arrow.y=canvas.height/2;                        var c_x,c_y; //相对于canvas坐标的位置；            var isMouseDown=false;            Arrow.draw(ctx)            canvas.addEventListener(mousedown,function(e) {                isMouseDown=true;            },false)            canvas.addEventListener(mousemove,function(e) {                if(isMouseDown==true){                    c_x=getPos(e).x-canvas.offsetLeft;                    c_y=getPos(e).y-canvas.offsetTop;                    //setInterval(drawFram,1000/60)                    requestAnimationFrame(drawFram)                }            },false)            canvas.addEventListener(mouseup,function(e) {                isMouseDown=false;            },false)            function drawFram(){                var dx=c_x-Arrow.x;                var dy=c_y-Arrow.y;                Arrow.rolation=Math.atan2(dy,dx);                ctx.clearRect(0,0,canvas.width,canvas.height);                Arrow.draw(ctx)            }            function getPos(e) {                var mouse={x:0,y:0}                var ee=e||event;                         if(e.pageX||e.pageY){                    mouse.x=e.pageX;                    mouse.y=e.pageY;                }else{                    mouse.x=e.pageX+document.body.scrollLeft+document.document.documentElement.scrollLeft;                    mouse.y=e.pageY+document.body.scrollTop+document.document.documentElement.scrollTop;                }                return mouse;            }        </script>       </body>   </html>  

DEMO地址：http://codepen.io/jonechen/pen/eZpgWd

不废话，直接上DEMO了，这个效果实现起来并不复杂，但是麻雀随小，五脏俱全，主要涉及到的知识点有：

1、canvas的基本绘图；
2、js各个事件的监听；
3、js动画；
4、三角函数结合js在canvas中的基本应用；

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://imgbuyun.weixiu-service.com/up79/202309/mifnuhlfs1w.html

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