html模拟激光,html5 canvas激光刻字动画特效

特效描述：html5 canvas激光刻字 动画特效。html5基于canvas制作输入文本，自动激光刻字打印动画特效。支持数字、中文、字母等网页刻字动画特效。

代码结构

1. HTML代码

let canvas, ctx, w, h, laser, text, particles, input;

function Laser(options) {

options = options || {};

this.lifespan = options.lifespan || Math.round(Math.random() * 20 + 20);

this.maxlife = this.lifespan;

this.color = options.color || '#fd2423';

this.x = options.x || Math.random() * w;

this.y = options.y || Math.random() * h;

this.width = options.width || 2;

this.update = function(index, array) {

this.lifespan > 0 && this.lifespan--;

this.lifespan <= 0 && this.remove(index, array);

}

this.render = function(ctx) {

if (this.lifespan <= 0) return;

ctx.beginPath();

ctx.globalAlpha = this.lifespan / this.maxlife;

ctx.strokeStyle = this.color;

ctx.lineWidth = this.width;

ctx.moveTo(this.x, this.y);

ctx.lineTo(w, this.y);

ctx.stroke();

ctx.closePath();

}

this.remove = function(index, array) {

array.splice(index, 1);

}

}

function Spark(options) {

options = options || {};

this.x = options.x || w * 0.5;

this.y = options.y || h * 0.5;

this.v = options.v || { direct: Math.random() * Math.PI * 2, weight: Math.random() * 10 + 2,