canvas实现彩色发光的线条毛发点击生成效果代码-html代码-BFW代码库

canvas实现彩色发光的线条毛发点击生成效果代码

代码语言：html

所属分类：其他

代码描述：canvas实现彩色发光的线条毛发点击生成效果代码

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

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

<head>
  <meta charset="UTF-8">
  


  
  
<style>
body {
  margin: 0;
  background: #1a1a1a;
  overflow: hidden;
}
</style>


  
  
</head>

<body >

<canvas id="canvas"></canvas>
  
      <script  >
const lerp = (a, b, t) => a + (b - a) * t
const rand = (min, max) => min + Math.random()*(max-min)

class BezierCurveGenerator {
  constructor (obj) {
    this.ctx = obj.canvas.getContext('2d')
    this.min = obj.min
    this.max = obj.max
    this.variation = obj.variation
    this.hue = obj.hue
    this.init()
  }
  
  point(a,b) {
    return ({
      x: lerp(this.A.x, this.D.x, rand(a, b)),
      y: lerp(this.A.y, this.D.y, rand(a, b)),
    })
  }
  
  init() {
    this.A = { x: 0, y: 0 }
    this.D = { x: rand(this.min, this.max), y: 0 }
    this.B = { x: lerp(0, this.D.x, rand(0., .4)), y: rand(-this.variation, this.variation) }
    this.C = { x: lerp(0, this.D.x, rand(.5, 1)), y: rand(-this.variation, this.variation) }
    this.opacity = rand(.1, .6)
  }
  
  draw (angle) {
    this.ctx.save()
    this.ctx.globalCompositeOperation = 'screen'
    this.ctx.translate(canvas.width * .5, canvas.height * .5)
    this.ctx.rotate(angle)
    this.ctx.beginPath()
    this.ctx.moveTo(this.A.x, this.A..........完整代码请登录后点击上方下载按钮下载查看