canvas彩色线条涂鸦动画效果代码-html代码-BFW代码库

canvas彩色线条涂鸦动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas彩色线条涂鸦动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
html, body{
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  background: black;
}
canvas {
  background: black;
  opacity: 1;
  width: 600;
  height: 600;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
a {
  color: white;
}
</style>




</head>

<body >
  <canvas id="canvas1"></canvas>


  
      <script  >
const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;

// global settings
ctx.fillStyle = 'green';

ctx.lineWidth = 10;
ctx.lineCap = 'round';

ctx.shadowOffsetX = '4';
ctx.shadowOffsetY = '4';
ctx.shadowColor = 'black';
//ctx.strokeStyle = pattern1;

const gradient1 = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient1.addColorStop(0.2, 'red');
gradient1.addColorStop(0.5, 'green');
gradient1.addColorStop(0.8, 'blue');
ctx.strokeStyle = gradient1;

class Particle {
  constructor(effect) {
    this.effect = effect;
    this.x = Math.floor(Math.random() * this.effect.width);
    this.y = Math.floor(Math.random() * this.effect.height);
    this.history = [];
    this.maxLength = Math.floor(Math.random() * 160 + 20);
    this.lifeSpan = this.maxLength * 2;
    this.timer = 0;
    this.speedX = 0;
    this.speedY = 0;
    this.angle = 0;
    this.va = Math.random() * 0.5 - 0.25;
    this.speedModifier = Math.random() * 2;
    this.curve = Math.random() * 6 - 3;
    this.vc = Math.random() * 0.4 - 0.2;
    this.lineWidth = Math.floor(Math.random() * 20 + 0.1);
    this.readyToReset = false;
    this.hue = Math.floor(Math.random() * 360);
  }
  update() {
    if (this.timer < this.lifeSpan) {
      // move particle in a direction
      this.x += this.speedX;
      this.y += this.speedY;
      // update particle position
      this.speedX = this.speedModifier * Math.cos(this.angle) * this.curve;
      this.speedY = this.speedModifier * Math.sin(this.angle) * this.curve;
      // if longer than max length, remove the oldest segment
      if (this.history.length > this.maxLength) {
.........完整代码请登录后点击上方下载按钮下载查看