书籍名称：HTML5-Animation-with-JavaScript
书籍源码：https://github.com/lamberta/html5-animation
1.在某一方向的方向的速率
本例掩饰水平的vx
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Velocity 1</title> <link rel="stylesheet" href="../include/style.css"> </head> <body> <header> Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a> </header> <canvas id="canvas" width="400" height="400"></canvas> <script src="../include/utils.js"></script> <script src="./classes/ball.js"></script> <script> window.onload = function () { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), ball = new Ball(), vx = 1; ball.x = 50; ball.y = 100; (function drawFrame () { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); ball.x += vx; ball.draw(context); }()); }; </script> </body> </html>
2.在两个方向的速率
和第一个差不多，但有两个速率.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Velocity 2</title> <link rel="stylesheet" href="../include/style.css"> </head> <body> <header> Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a> </header> <canvas id="canvas" width="400" height="400"></canvas> <script src="../include/utils.js"></script> <script src="./classes/ball.js"></script> <script> window.onload = function () { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), ball = new Ball(), vx = 1, vy = 1; ball.x = 50; ball.y = 100; (function drawFrame () { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); ball.x += vx; ball.y += vy; ball.draw(context); }()); }; </script> </body> </html>
3.用三角函数生成的各个方向的速率
根据向量加法，和三角函数可以将某个方向的速率分解成两个方向。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Velocity Angle</title> <link rel="stylesheet" href="../include/style.css"> </head> <body> <header> Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a> </header> <canvas id="canvas" width="400" height="400"></canvas> <script src="../include/utils.js"></script> <script src="./classes/ball.js"></script> <script> window.onload = function () { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), ball = new Ball(), angle = 45, speed = 1; ball.x = 50; ball.y = 100; (function drawFrame () { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); var radians = angle * Math.PI / 180, vx = Math.cos(radians) * speed, vy = Math.sin(radians) * speed; ball.x += vx; ball.y += vy; ball.draw(context); }()); }; </script> </body> </html>
4.箭头跟随程序
关键点：1.根据箭头的位置和鼠标的位置判断箭头倾斜的角度。
2.根据角度将速率分解X,Y方向的速率。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Follow Mouse 1</title> <link rel="stylesheet" href="../include/style.css"> </head> <body> <header> Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a> </header> <canvas id="canvas" width="400" height="400"></canvas> <aside>Move mouse on canvas element.</aside> <script src="../include/utils.js"></script> <script src="./classes/arrow.js"></script> <script> window.onload = function () { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), mouse = utils.captureMouse(canvas), arrow = new Arrow(), speed = 3; (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, angle = Math.atan2(dy, dx), vx = Math.cos(angle) * speed, vy = Math.sin(angle) * speed; arrow.rotation = angle; //radians arrow.x += vx; arrow.y += vy; arrow.draw(context); }()); }; </script> </body> </html>
5.旋转
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Rotational Velocity</title> <link rel="stylesheet" href="../include/style.css"> </head> <body> <header> Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a> </header> <canvas id="canvas" width="400" height="400"></canvas> <script src="../include/utils.js"></script> <script src="./classes/arrow.js"></script> <script> window.onload = function () { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), mouse = utils.captureMouse(canvas), arrow = new Arrow(), vr = 2; //degrees arrow.x = canvas.width / 2; arrow.y = canvas.height / 2; (function drawFrame () { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); arrow.rotation += vr * Math.PI / 180; //to radians arrow.draw(context); }()); }; </script> </body> </html>