canvas中的三角运动（5） —— 圆周运动和椭圆运动

   <h2>一. 圆周运动</h2>    <h3>1.1 思路分析：</h3>    <p>圆的方程为：</p>    <pre>  <code class="language-javascript">// (x0, y0)为圆心位置；(x, y)为圆上的点  (x - x0) ^ 2 + (y - y0) ^ 2 = r ^ 2  cos(angle) ^ 2 + sin(angle) ^ 2 = 1</code></pre>    <p>因此，综合以上两式，可得：</p>    <ul>     <li><strong>x = r * cos(angle) + x0</strong></li>     <li><strong>y = r * sin(angle) + y0</strong></li>    </ul>    <p>因此，应用正弦函数计算y坐标，用余弦函数计算x坐标。</p>    <h2>1.2 实例：</h2>    <pre>  <code class="language-javascript">// cancelRequestAnimFrame的兼容函数  window.cancelRequestAnimFrame = ( function() {      return window.cancelAnimationFrame ||          window.webkitCancelRequestAnimationFrame ||          window.mozCancelRequestAnimationFrame ||          window.oCancelRequestAnimationFrame ||          window.msCancelRequestAnimationFrame ||          clearTimeout;  } )();    window.onload = function() {      var canvas = document.getElementById("canvas"),          context = canvas.getContext("2d"),          ball = new Ball(2),          angle = 0,          centerX = canvas.width / 2,          centerY = canvas.height / 2,          radius = 50,          speed = 0.05,          timer = null;            ball.lineWidth = 0;        (function drawFrame() {          timer = window.requestAnimationFrame(drawFrame, canvas);          if(angle > Math.PI * 2 && timer) {              window.cancelRequestAnimFrame(timer);              timer = null;          }          // context.clearRect(0, 0, canvas.width, canvas.height);          ball.y = centerY + Math.sin(angle) * radius;          ball.x = centerX + Math.cos(angle) * radius;          angle += speed;            ball.draw(context);      })();  }</code></pre>    <p>演示如下： <a href="/misc/goto?guid=4959677072878829266" rel="nofollow,noindex">http://codepen.io/dengzhirong/pen/akxQbx</a></p>    <h2>二. 椭圆运动</h2>    <h3>2.1 思路分析：</h3>    <p>椭圆的方程为：</p>    <pre>  <code class="language-javascript">// (x0, y0)为椭圆的圆心位置；(x, y)为椭圆上的点  [(x - x0) / radiusX] ^ 2 + [(y - y0) / radiusY] ^ 2 = 1  cos(angle) ^ 2 + sin(angle) ^ 2 = 1</code></pre>    <p>因此，综合以上两式，可得：</p>    <ul>     <li><strong>x = radiusX * cos(angle) + x0</strong></li>     <li><strong>y = radiusY * sin(angle) + y0</strong></li>    </ul>    <p>由此可得出椭圆运动的坐标值。</p>    <h2>2.2 实例：</h2>    <pre>  <code class="language-javascript">// cancelRequestAnimFrame的兼容函数  window.cancelRequestAnimFrame = ( function() {      return window.cancelAnimationFrame ||          window.webkitCancelRequestAnimationFrame ||          window.mozCancelRequestAnimationFrame ||          window.oCancelRequestAnimationFrame ||          window.msCancelRequestAnimationFrame ||          clearTimeout;  } )();    window.onload = function() {      var canvas = document.getElementById("canvas"),          context = canvas.getContext("2d"),          ball = new Ball(2),          angle = 0,          centerX = canvas.width / 2,          centerY = canvas.height / 2,          radiusX = 150,          radiusY = 100,          speed = 0.05,          timer = null;            ball.lineWidth = 0;        (function drawFrame() {          timer = window.requestAnimationFrame(drawFrame, canvas);          if(angle > Math.PI * 2 && timer) {              window.cancelRequestAnimFrame(timer);              timer = null;          }          // context.clearRect(0, 0, canvas.width, canvas.height);          ball.y = centerY + Math.sin(angle) * radiusY;          ball.x = centerX + Math.cos(angle) * radiusX;          angle += speed;            ball.draw(context);      })();  }</code></pre>    <p>演示如下： <a href="/misc/goto?guid=4959677072968532412" rel="nofollow,noindex">http://codepen.io/dengzhirong/pen/WxWYvX</a></p>    <p> </p>    <p>来自：http://www.dengzhr.com/js/962</p>    <p> </p>