canvas线条散花背景效果-html代码-BFW代码库

canvas线条散花背景效果

代码语言：html

所属分类：背景

代码描述：canvas线条散花背景效果

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

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

</head>
<body translate="no">

<script>
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style = "position:absolute;top:0px;left:0px;background-color:black;";
document.body.style = "overflow:hidden;background-color:black";
document.body.appendChild(canvas);
var charges = [];
class PointCharge {
  constructor(x, y, q, r) {
    this.x = x;
    this.y = y;
    this.q = q;
    this.r = r;
    charges.push(this);
    var lines = 4;
    if (q > 0)
    {
      for (var i = 0; i < Math.abs(this.q) * lines; i++) {
        var theta = Math.PI * 2 * (i + (q > 0) / 2) / (Math.abs(q) * lines);
        new Tracer(x + Math.cos(theta) * r, y + Math.sin(theta) * r, q);
      }
    }
  }
  draw(drawingContext) {
    drawingContext.beginPath();
    drawingContext.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
    drawingContext.fillStyle = `hsla(${240 * (this.q > 0)},${Math.floor(
    100 * (1 - 1 / (Math.abs(this.q) / 16 + 1)))
    }%,50%,1)`;
    drawingContext.fill();
  }}

var tracers = [];
class Tracer {
  constructor(x, y, c) {
    this.x = x;
    this.y = y;
    this.q = 1 - 2 * (c < 0);
    tracers.push(this);
    this.moving = true;
  }
  move(step, drawingContext) {
    var vect = [0, 0];
    for (var i = 0; i < charges.length; i++) {
      var q = charges[i];
      var rr = (this.x - q.x) ** 2 + (this.y - q.y) ** 2;
      if (.........完整代码请登录后点击上方下载按钮下载查看