canvas网格蠕虫动画效果-html代码-BFW代码库

canvas网格蠕虫动画效果

代码语言：html

所属分类：动画

代码描述：canvas网格蠕虫动画效果

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

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


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

<script>
/*
 *Animates connected nodes about a grid
 *------------------------------------- 
 *@author:    Caleb Nii Tetteh Tsuru Addy 
 *@date:      19th April, 2020 
 *@email:     calebniitettehaddy@gmail.com 
 *@twitter:   @cnttaddy
 *@github :   https://github.com/niitettehtsuru/GridWorms 
 *@license:   GNU General Public License v3.0
 */
//set up the gridworm
class GridWorm
{
  constructor(point, interval, pointsList, screenWidth, screenHeight)
  {
    this.radius = 2;
    this.xCoord = point.x;
    this.yCoord = point.y;
    this.interval = interval;
    this.color = this.getColor(1, true); //get random color object
    this.mainColor = this.color.color; //color of the head and body of the girdworm
    this.mainColorIndex = this.color.index;
    this.nColor = this.getColor(1, true); //get another random color object
    this.arrowHeadColor = this.nColor.color; //color of the arrrow points at the head of the gridworm
    this.arrowHeadColorIndex = this.nColor.index;
    this.pointsList = pointsList;
    this.screenWidth = screenWidth;
    this.screenHeight = screenHeight;
    this.speed = 5; //the magnitude of the velocity
    this.velocity = this.getVelocity();
    this.junctionMemory = [{ point: point, velocity: this.velocity }]; //memory of each junction visited(helps to construct the worm)
    //the maximum number of junctions a gridworm can keep in memory(this determines how long the gridworm will be)
    this.junctionMemoryLength = 6;
  }
  getColor(opacity, isRandom = true, index = 0)
  {
    if (opacity < 0 || opacity > 1 || opacity === null || isNaN(opacity)) //if opacity is incorrect
      {
        opacity = 1;
      }
    var colors =
    [
    `rgba(0,0,0,${opacity})`, `rgba(192,192,192,${.........完整代码请登录后点击上方下载按钮下载查看