<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="ball.js"></script> <style type="text/css"> body{background-color: silver;} #canvas{background-color: white;} </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script type="text/javascript"> window.onload=function(){ var canvas=document.getElementById("canvas"), context=canvas.getContext("2d"), mouse=utils.captureMouse(canvas), arrow=new Ball(), speed=3; (function drawScreen(){ window.requestAnimationFrame(drawScreen,canvas); context.clearRect(0,0,canvas.width,canvas.height); var dx=mouse.x-arrow.x, dy=mouse.y-arrow.y, angle=Math.atan2(dy,dx), vx=Math.cos(angle)*speed, vy=Math.sin(angle)*speed; arrow.rotation=angle; arrow.x+=vx; arrow.y+=vy; arrow.draw(context); }()) } </script> </body> </html>
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.rotate(this.rotation); 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(); } function Ball(radius,color){ if (radius===undefined) { radius=40; } if (color===undefined) { color="#ff0000"; } this.x=0; this.y=0; this.radius=radius; this.rotation=0; this.scaleX=1; this.scaleY=1; this.color=utils.parseColor(color); this.lineWidth=1; } Ball.prototype.draw=function(context){ context.save(); context.translate(this.x,this.y); context.rotate(this.rotation); context.scale(this.scaleX,this.scaleY); context.lineWidth=this.lineWidth; context.fillStyle=this.color; context.beginPath(); context.arc(0,0,this.radius,0,(Math.PI*2),true); context.closePath(); context.fill(); if(this.lineWidth>0){ context.stroke(); } context.restore(); }
if (!window.requestAnimationFrame) { window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) { return window.setTimeout(callback, 17 /*~ 1000/60*/); }); } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = (window.cancelRequestAnimationFrame || window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame || window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame || window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame || window.clearTimeout); } window.utils = {}; window.utils.captureMouse = function (element) { var mouse = {x: 0, y: 0, event: null}, body_scrollLeft = document.body.scrollLeft, element_scrollLeft = document.documentElement.scrollLeft, body_scrollTop = document.body.scrollTop, element_scrollTop = document.documentElement.scrollTop, offsetLeft = element.offsetLeft, offsetTop = element.offsetTop; element.addEventListener('mousemove', function (event) { var x, y; if (event.pageX || event.pageY) { x = event.pageX; y = event.pageY; } else { x = event.clientX + body_scrollLeft + element_scrollLeft; y = event.clientY + body_scrollTop + element_scrollTop; } x -= offsetLeft; y -= offsetTop; mouse.x = x; mouse.y = y; mouse.event = event; }, false); return mouse; };