<!DOCTYPE HTML> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="arrow.js"></script> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script type="text/javascript"> /** * radians=degrees*Math.PI/180 * degrees=radians*180/Math.PI */ window.onload=function(){ var canvas=document.getElementById('canvas'), context=canvas.getContext('2d'); mouse=utils.captureMouse(canvas); arrow=new Arrow(); arrow.x=canvas.width/2; arrow.y=canvas.height/2; (function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); var dx=mouse.x-arrow.x, dy=mouse.y-arrow.y; arrow.rotation=Math.atan2(dy,dx); arrow.draw(context); }()) } </script> </body> </html>
/** * [utils description] * @type {Object} */ var utils={}; utils.captureMouse=function(element){ var mouse={x:0,y:0}; element.addEventListener('mousemove',function(event){ var x,y; if(event.pageX || event.pageY){ x=event.pageX; y=event.pageY; }else{ x=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft; y=event.clientY=document.body.scrollTop+document.documentElement.scrollTop; } x-=element.offsetLeft; y-=element.offsetTop; mouse.x=x; mouse.y=y; },false); return mouse; } utils.captureTouch=function(element){ var touch={x:null,y:null,isPressed:false}; element.addEventListener('touchstart',function(event){ touch.isPressed=true; },false); element.addEventListener('touchend',function(event){ touch.isPressed=false; touch.x=null; touch.y=null; },false); element.addEventListener('touchmove',function(event){ var x,y,touch_event=event.touches[0]; if(touch_event.pageX||touch_event.pageY){ x=touch_event.pageX; y=touch_event.pageY; }else{ x=touch_event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft; y=touch_event.clientY+document.body.scrollTop+document.documentElement.scrollTop; } x-=offsetLeft; y-=offsetTop; touch.x=x; touch.y=y; },false); return touch; }
/** * [Arrow description] */ function Arrow(){ this.x=0; this.y=0; this.color="#ffff00"; this.rotation=0; } Arrow.prototype.draw=function(context){ context.save(); context.translate(this.x,this.y); context.lineWidth=2; context.fillStyle=this.color; context.beginPath(); context.moveTo(-50,-25); context.lineTo(0,-25); context.lineTo(0,-50); context.lineTo(50,0); context.lineTo(0,50); context.lineTo(0,25); context.lineTo(-50,25); context.lineTo(-50,-25); context.closePath(); context.fill(); context.stroke(); context.restore(); }