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,${opacity})` /*silver*/, `rgba(128,128,128,${opacity})` /*gray*/, `rgba(128,0,0,${opacity})` /*maroon*/,
    `rgba(255,0,0,${opacity})` /*red*/, `rgba(0,255,0,${opacity})` /*lime*/, `rgba(0,0,255,${opacity})` /*blue*/, `rgba(255,0,255,${opacity})` /*fuchsia*/,
    `rgba(128,128,0,${opacity})` /*olive*/, `rgba(0,128,0,${opacity})` /*green*/, `rgba(128,0,128,${opacity})` /*purple*/,
    `rgba(0,128,128,${opacity})` /*teal*/, `rgba(0,0,128,${opacity})` /*navy*/, `rgba(138,57,0,${opacity})` /*brown*/, `rgba(205,133,63,${opacity})`,
    `rgba(244,164,96,${opacity})`, `rgba(139,105,30,${opacity})`, `rgba(165,42,42,${opacity})`, `rgba(178,34,34,${opacity})`,
    `rgba(220,20,60,${opacity})`, `rgba(255,140,0,${opacity})`, `rgba(255,165,0,${opacity})`, `rgba(255,215,0,${opacity})`, `rgba(184,134,11,${opacity})`,
    `rgba(218,165,32,${opacity})`, `rgba(218,165,32,${opacity})`, `rgba(238,232,170,${opacity})`, `rgba(189,183,107,${opacity})`, `rgba(240,230,140,${opacity})`,
    `rgba(0,100,0,${opacity})`, `rgba(34,139,34,${opacity})`, `rgba(32,178,170,${opacity})`, `rgba(47,79,79,${opacity})`,
    `rgba(0,139,139,${opacity})`, `rgba(95,158,160,${opacity})`, `rgba(70,130,180,${opacity})`, `rgba(25,25,112,${opacity})`,
    `rgba(0,0,128,${opacity})`, `rgba(0,0,139,${opacity})`, `rgba(72,61,139,${opacity})`, `rgba(75,0,130,${opacity})`, `rgba(139,0,139,${opacity})`,
    `rgba(0,0,0,${opacity})`.........完整代码请登录后点击上方下载按钮下载查看