HTML5 canvas如何绘制酷炫能量线条效果（附代码）

本篇文章给大家介绍一下使用HTML5 canvas绘制酷炫能量线条特效的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。

上面是效果图，下面直接附js代码，希望对大家有所帮助！！

// UTILconst PI = Math.PI,  TWO_PI = Math.PI * 2;const Util = {};Util.timeStamp = function() {  return window.performance.now();};Util.random = function(min, max) {  return min + Math.random() * (max - min);};Util.map = function(a, b, c, d, e) {  return (a - b) / (c - b) * (e - d) + d;};Util.lerp = function(value1, value2, amount) {  return value1 + (value2 - value1) * amount;};Util.clamp = function(value, min, max) {  return Math.max(min, Math.min(max, value));};// Vectorclass Vector {  constructor(x, y) {    this.x = x || 0;    this.y = y || 0;  }  set(x, y) {    this.x = x;    this.y = y;  }  reset() {    this.x = 0;    this.y = 0;  }  fromAngle(angle) {    let x = Math.cos(angle),      y = Math.sin(angle);    return new Vector(x, y);  }  add(vector) {    this.x += vector.x;    this.y += vector.y;  }  sub(vector) {    this.x -= vector.x;    this.y -= vector.y;  }  mult(scalar) {    this.x *= scalar;    this.y *= scalar;  }  p(scalar) {    this.x /= scalar;    this.y /= scalar;  }  dot(vector) {    return vector.x * this.x + vector.y * this.y;  }  limit(limit_value) {    if (this.mag() > limit_value) this.setMag(limit_value);  }  mag() {    return Math.hypot(this.x, this.y);  }  setMag(new_mag) {    if (this.mag() > 0) {      this.normalize();    } else {      this.x = 1;      this.y = 0;    }    this.mult(new_mag);  }  normalize() {    let mag = this.mag();    if (mag > 0) {      this.x /= mag;      this.y /= mag;    }  }  heading() {    return Math.atan2(this.y, this.x);  }  setHeading(angle) {    let mag = this.mag();    this.x = Math.cos(angle) * mag;    this.y = Math.sin(angle) * mag;  }  dist(vector) {    return new Vector(this.x - vector.x, this.y - vector.y).mag();  }  angle(vector) {    return Math.atan2(vector.y - this.y, vector.x - this.x);  }  copy() {    return new Vector(this.x, this.y);  }}// Init canvaslet canvas = document.createElement("canvas"),  ctx = canvas.getContext("2d"),  H = (canvas.height = window.innerHeight),  W = (canvas.width = window.innerWidth);document.body.appendChild(canvas);// Mouselet mouse = {  x: W/2,  y: H/2};canvas.onmousemove = function(event) {  mouse.x = event.clientX - canvas.offsetLeft;  mouse.y = event.clientY - canvas.offsetTop;};document.body.onresize = function(event){  H = (canvas.height = window.innerHeight);  W = (canvas.width = window.innerWidth);}// Let's goclass Arrow {  constructor(x, y, target) {    this.position = new Vector(x, y);    this.velocity = new Vector().fromAngle(Util.random(0,TWO_PI));    this.acceleration = new Vector(0, 0);    this.target = target;    this.travelled_distance = 0;    this.min_size = 1;    this.max_size = 6;    this.size = Util.random(this.min_size, this.max_size);    this.zone = this.size * 4;    this.topSpeed = Util.map(this.size,this.min_size,this.max_size,40,10);    let tailLength = Math.floor(Util.map(this.size, this.min_size, this.max_size, 4, 16));    this.tail = [];    for (let i = 0; i < tailLength; i++) {      this.tail.push({        x: this.position.x,        y: this.position.y      });    }    this.wiggle_speed = Util.map(this.size, this.min_size, this.max_size, 2 , 1.2);    this.blink_offset = Util.random(0, 100);    this.alpha = Util.random(0.1,1)  }  render() {    this.update();    this.draw();  }  update() {    let old_position = this.position.copy();    // Focus on target    let t = new Vector(this.target.x, this.target.y),      angle = this.position.angle(t);    let d_f_target = t.dist(this.position);      let f = new Vector().fromAngle(angle);       f.setMag(Util.map(Util.clamp(d_f_target,0,400), 0, 400, 0, this.topSpeed * 0.1));      this.addForce(f);         // Update&nbs