画布散景生成

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var c1 = document.getElementById( 'c1' ),
	ctx1 = c1.getContext( '2d' ),
	c2 = document.getElementById( 'c2' ),
	ctx2 = c2.getContext( '2d' ),
	twopi = Math.PI * 2,
	parts = [],
	sizeBase,
	cw,
	opt,
	hue,
	count;

function rand( min, max ) {
	return Math.random() * ( max - min ) + min;
}

function hsla( h, s, l, a ) {
	return 'hsla(' + h + ',' + s + '%,' + l + '%,' + a + ')';
}
	
function create() {
	sizeBase = cw + ch;
	count = Math.floor( sizeBase * 0.3 ),
	hue = rand( 0, 360 ),
	opt = {
		radiusMin: 1,
		radiusMax: sizeBase * 0.04,
		blurMin: 10,
		blurMax: sizeBase * 0.04,
		hueMin: hue,
		hueMax: hue + 100,
		saturationMin: 10,
		saturationMax: 70,
		lightnessMin: 20,
		lightnessMax: 50,
		alphaMin: 0.1,
		alphaMax: 0.5
	}
	ctx1.clearRect( 0, 0, cw, ch );
	ctx1.globalCompositeOperation = 'lighter';
	while( count-- ) {
		var radius = rand( opt.radiusMin, opt.radiusMax ),
			blur = rand( opt.blurMin, opt.blurMax ),
			x = rand( 0, cw ),
			y = rand( 0, ch ),
			hue = rand(opt.hueMin, opt.hueMax ),
			saturation = rand( opt.saturationMin, opt.saturationMax ),
			lightness = rand(  opt.lightnessMin, opt.lightnessMax ),
			alpha = rand( opt.alphaMin, opt.alphaMax );

ctx1.shadowColor = hsla( hue, saturation, lightness, alpha );
		ctx1.shadowBlur = blur;
		ctx1.beginPath();
		ctx1.arc( x, y, radius, 0, twopi );
		ctx1.closePath();
		ctx1.fill();
	}
	
	parts.length = 0;
	for( var i = 0; i < Math.floor( ( cw + ch ) * 0.03 ); i++ ) {
		parts.push({
			radius: rand( 1, sizeBase * 0.03 ),
			x: rand( 0, cw ),
			y: rand( 0, ch ),
			angle: rand( 0, twopi ),
			vel: rand( 0.1, 0.5 ),
			tick: rand( 0, 10000 )
		});
	}
}

function init() {
	resize();
	create();
	loop();
}

function resize() {
	cw = c1.width = c2.width = window.innerWidth,
	ch = c1.height = c2.height = window.innerHeight;
	create();
}

function click() {
	create()
}

window.addEventListener( 'resize', resize );
window.addEventListener( 'click', click );

init();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg