书籍名称：HTML5-Animation-with-JavaScript
书籍源码：https://github.com/lamberta/html5-animation
1.正弦函数。x位置递增，y位置用sin生成。
这段代码是不需要ball.js的。
代码如下：
<!doctype html> <html><head><meta charset="utf-8"><title>Wave 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>window.onload = function () {var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),angle = 0,range = 50,centerY = canvas.height / 2,xspeed = 1,yspeed = 0.05,xpos = 0,ypos = centerY;context.lineWidth = 2;(function drawFrame () {window.requestAnimationFrame(drawFrame, canvas);context.beginPath();context.moveTo(xpos, ypos);//Calculate the new position. xpos += xspeed;angle += yspeed;ypos = centerY + Math.sin(angle) * range;context.lineTo(xpos, ypos);context.stroke();}());};</script></body> </html>
2.做环绕运动，就是求旋转角度对应在圆上的坐标，由下图可以看出x的值是半径r*cos（angle）,而y则为r*sin(angle)，由于canvas的坐标不同于传统的坐标系，大家自行与传统坐标系区别开。
椭圆运动则是某方向值偏大。
上代码：08-circle.html
<!doctype html> <html><head><meta charset="utf-8"><title>Circle</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 = 0,centerX = canvas.width / 2,centerY = canvas.height / 2,radius = 50,speed = 0.05;(function drawFrame () {window.requestAnimationFrame(drawFrame, canvas);context.clearRect(0, 0, canvas.width, canvas.height);ball.x = centerX + Math.cos(angle) * radius;ball.y = centerY + Math.sin(angle) * radius;angle += speed;ball.draw(context);}());};</script></body> </html>
09-oval.html
<!doctype html> <html><head><meta charset="utf-8"><title>Oval</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 = 0,centerX = canvas.width / 2,centerY = canvas.height / 2,radiusX = 150,radiusY = 100,speed = 0.05;(function drawFrame () {window.requestAnimationFrame(drawFrame, canvas);context.clearRect(0, 0, canvas.width, canvas.height);ball.x = centerX + Math.cos(angle) * radiusX;ball.y = centerY + Math.sin(angle) * radiusY;angle += speed;ball.draw(context);}());};</script></body> </html>
