html怎么制作流动横条,利用HTML5 Canvas实现竖直流动线条特效

特效描述：利用HTML5 Canvas实现 竖直流动 线条特效。利用HTML5 Canvas实现竖直流动线条特效

代码结构

1. HTML代码

Click on the Canvas for new Colors :)

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var bgg = document.getElementById("bg_glow");

w = ctx.canvas.width = window.innerWidth;

h = ctx.canvas.height = window.innerHeight;

window.onresize = function() {

w = ctx.canvas.width = window.innerWidth;

h = ctx.canvas.height = window.innerHeight;

maxHeight = h*.9

minHeight = h*.5;

dots = [];

pushDots();

ctx.globalCompositeOperation = "lighter";

};

document.getElementById("overlay").onclick = function(){

hue = Math.random()*360;