三维曲线动画旋转效果-html代码-BFW代码库

三维曲线动画旋转效果

代码语言：html

所属分类：动画

代码描述：三维曲线动画旋转效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">


</head>
<body translate="no">
<canvas id='orbit8Canvas' width='0' height='0' style='background-color: black;'></canvas>

<script>
'use strict';
/*
               * @author:    Caleb Nii Tetteh Tsuru Addy
               * @date:      13th June, 2020
               * @email:     calebniitettehaddy@gmail.com 
               * @twitter:   @cnttaddy
               * @github :   https://github.com/niitettehtsuru/Orbit8 
               * @license:   GNU General Public License v3.0
               */
/* Draws and rotates a lissajous curve.
                   *A lissajous curve is a graph of the following two parametric equations: 
                   * 
                   * x = Asin(at+?)  --------- (1)
                   * y = Bsin(bt)    --------- (2)
                   * 
                   * In the constructor: 
                   *  A is this.relativeWidth
                   *  B is this.relativeHeight
                   *  a is this.numHorizontalTangents
                   *  b is this.numVerticalTangents
                   *  ? is this.rotationAngle
                   *  t is this.parameter
                   */
class Lissajous
{
  constructor(data)
  {
    this.heightOffSet = data.heightOffset;
    this.screenHeight = data.screenHeight;
    this.screenWidth = data.screenWidth;
    /* The ratio this.relativeWidth/this.relativeHeight determines the relative width-to-height ratio of the curve.  
                                          * For example, a ratio of 2/1 produces a figure that is twice as wide as it is high.*/
    this.relativeWidth = data.relativeWidth; //relative width of the curve to the height; 
    this.relativeHeight = data.relat.........完整代码请登录后点击上方下载按钮下载查看