html银河特效编码,利用HTML5实现Canvas绘画银河特效

特效描述：利用HTML5实现 Canvas 绘画银河 特效。利用HTML5实现Canvas绘画银河特效

代码结构

1. 引入JS

2. HTML代码

使用 "左键单击" 进行绘制

光标速度会影响笔的大小。

var w = window.innerWidth;

var h = window.innerHeight;

window.onresize = function () {

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

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

};

var canvas = document.createElement('canvas');

document.body.appendChild(canvas);

canvas.width = w;

canvas.height = h;

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

mix_Red = 80;

mix_Green = 140;

mix_Blue = 220;

opacity = .15;

smoke_Size = 5;

select = {Compositing: 'lighter'};

var controls = new function() {

this.mix_Red = mix_Red;

this.mix_Green = mix_Green;

this.mix_Blue = mix_Blue;

this.opacity = opacity;

this.smoke_Size = smoke_Size;

this.redraw = function() {

mix_Red = controls.mix_Red;

mix_Green = controls.mix_Green;

mix_Blue = controls.mix_Blue;

opacity = controls.opacity;

smoke_Size = controls.smoke_Size;

ctx.globalCompositeOperation = Object.values(select)[0];

}

}

var obj = { CLEAR_CANVAS:function(){ ctx.clearRect(0,0,w,h); }};

var gui = new dat.GUI({resizable : false});

gui.add(controls, "mix_Red", 0, 255).step(1).onChange(controls.redraw);

gui.add(controls, "mix_Green", 0, 255).step(1).onChange(controls.redraw);

gui.add(controls, "mix_Blue", 0, 255).ste