canvas圆弧画圈动画效果-html代码-BFW代码库

canvas圆弧画圈动画效果

代码语言：html

所属分类：动画

代码描述：canvas圆弧画圈动画效果

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

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


</head>
<body translate="no">
<canvas id='mandalaCanvas' width='1350' height='620' style='background-color: white;'></canvas>

<script>
'use strict';
/*
               * Torus Mandala drawing animation
               * @author:    Caleb Nii Tetteh Tsuru Addy(Virus) 
               * @date:      6th April, 2020 
               * @email:     100percentvirusdownloading@gmail.com 
               * @twitter:   @niitettehtsuru
               * @github :   https://github.com/niitettehtsuru/TorusMandala
               * @codepen:   https://codepen.io/niitettehtsuru/pen/MWwMLvN
               * @license:   GNU General Public License v3.0
               */
class Circle
{
  constructor(screenWidth, screenHeight, xCoordinateOfCircleCenter, yCoordinateOfCircleCenter, radius, listOfColors)
  {
    this.screenWidth = screenWidth;
    this.screenHeight = screenHeight;
    this.radius = radius;
    this.listOfColors = listOfColors;
    this.xCoordinateOfCircleCenter = xCoordinateOfCircleCenter;
    this.yCoordinateOfCircleCenter = yCoordinateOfCircleCenter;
    this.unitAngularIncrement = Math.PI / 16; //divides the main circle into 32 equal parts
    this.unitAngularVelocity = 0;
    this.numOfCirclesToDraw = 0; //the number of circles to be drawn on the circumference of the main circle 
    //all the circles whose centers lie on the circumference of the main circle circle
    this.circumcircles = this.getCircumCircles(this.radius, this.xCoordinateOfCircleCenter, this.yCoordinateOfCircleCenter);
  }
  /**
    * Let node correspond to window resizing.
    * @param  {number} screenHeight The height of the screen. 
    * @param  {number} screenWidth  The width of the screen.  
    * @param  {number} dy           The percentage change in browser window height 
    * @param  {number} dx           The percentage change in browser window width  .  .........完整代码请登录后点击上方下载按钮下载查看