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

代码语言：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  .  
    */
  refreshScreenSize(screenHeight, screenWidth, dx, dy)
  {
    this.screenHeight = screenHeight;
    this.screenWidth = screenWidth;
    this.xCoordinateOfCircleCenter *= dx;
    this.yCoordinateOfCircleCenter *= dy;
    //replace the old 'circumcircles' with new ones(the only noticeable difference between old and new will be the color)
    this.circumcircles = this.getCircumCircles(this.radius, this.xCoordinateOfCircleCenter, this.yCoordinateOfCircleCenter);
  }
  getCircumCircles(radius, xCoordinateOfCircleCenter, yCoordinateOfCircleCenter)
  {
    var circumCircles = [];
    var p1 = { x: xCoordinateOfCircleCenter, y: yCoordinateOfCircleCenter };
    radius *= 2; //amplify the radius
    var radiusY = radius;
    var radiusX = radius;
    var startAngle = 0;
    var rotationAngle = 0;
    var increment = this.unitAngularIncrement; //divide the circle into 32 equal parts  
    for (var i = startAngle * Math.PI; i < 2 * Math.PI; i += increment)
    {
      var xPos = p1.x - radiusX * Math.sin(i) * Math.sin(rotationAngle * Math.PI) + radiusY * Math.cos(i) * Math.cos(rotationAngle * Math.PI);
      var yPos = p1.y + radiusY * Math.cos(i) * Math.sin(rotationAngle * Math.PI) + radiusX * Math.sin(i) * Math.cos(rotationAngle * Math.PI);
      //get all the points on the circumference of the circle, separated at 'this.unitAngularIncrement' intervals.  
      //we'll be standing on these points to draw the mandala. 
      circumCircles.push({ x: xPos, y: yPos, r: radius, color: this.getRandomColor() });
    }
    return circumCircles;
  }
  getRandomColor()
  {
    return this.listOfColors[parseInt(this.getRandomNumber(0, this.listOfColors.length))];
  }
  /**
    * Returns a random number between min (inclusive) and max (exclusive)
    * @param  {number} min The lesser of the two numbers. 
    * @param  {number} max The greater of the two numbers.  
    * @return {number} A random number between min (inclusive) and max (exclusive)
    */
  getRandomNumber(min, max)
  {
    return Math.random().........完整代码请登录后点击上方下载按钮下载查看