zoukankan      html  css  js  c++  java
  • 动画原理——绘制正弦函数&环绕运动&椭圆运动

    书籍名称: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>
  • 相关阅读:
    八进制转换成十进制(你会明白的,呵呵)
    从键盘读取7个数(150)的整数值,每读一个值打印出该值个数的*号.
    两个字符串的连接程序
    判断一个素数能被几个9整除.
    809*??=800*??+9*??+1 其中??代表的两位数,8*??的结果为两位数,9*??的结果为3位数。求??代表的两位数,及809*??后的结果。
    一个偶数总能表示为两个素数的和.
    07所能组成的奇数的个数
    asp.net .ashx文件使用Server.MapPath解决方法
    MVC常见问题小总结
    amcharts_2.6.13左上角的广告咱去掉
  • 原文地址:https://www.cnblogs.com/winderby/p/4243568.html
Copyright © 2011-2022 走看看