给人人介绍一下应用HTML5canvas绘制酷炫能量线条特效的方法。有一定的参考价钱，有需要的朋侪能够参考一下，希望对于你们有所助。
>
下面是效果图，下面间接附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 {if (other !== this) {let dist = this.position.dist(other.position),max_dist = this.zone + other.size;if (max_dist - dist >= 0) {let angle = other.position.angle(this.position);let force = new Vector().fromAngle(angle);force.setMag(Util.map(dist, 0, max_dist, 2, 0));this.addForce(force);}}});}}let arrows = [];for (let i = 0; i {a.avoid(arrows);});arrows.forEach(a => {a.render();});frame += 1;requestAnimationFrame(loop);}ctx.lineCap = "round";ctx.lineJoin = "round";loop();
网友评论