html5 spring demo
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Follow Mouse</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> <textarea name="" id="log" cols="30" rows="10"></textarea> <script type="text/javascript"> window.onload=function(){ var canvas=document.getElementById("canvas"), context=canvas.getContext("2d"), mouse=utils.captureMouse(canvas), ball=new Ball(), spring=0.03, friction=0.9, gravity=2, vx=0, vy=0; (function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); context.clearRect(0,0,canvas.width,canvas.height); var dx=mouse.x-ball.x, dy=mouse.y-ball.y, ax=dx*spring, ay=dy*spring; vx+=ax; vy+=ay; vy+=gravity; vx*=friction; vy*=friction; ball.x+=vx; ball.y+=vy; context.beginPath(); context.moveTo(ball.x,ball.y); context.lineTo(mouse.x,mouse.y); context.stroke(); ball.draw(context); }()) } </script> </body> </html>
posted on 2013-07-19 10:02 Ijavascript 阅读(586) 评论(0) 编辑 收藏 举报
