| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
bjfish2012
8年前发布

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>    
 本文由用户 bjfish2012 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1471744243860.html
JavaScript开发 canvas