canvas窝峰流光动态效果-html代码-BFW代码库

canvas窝峰流光动态效果

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<style>
canvas { position: absolute; top: 0; left: 0; }
</style>
</head>
<body>
<canvas id=c></canvas>
<script>
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),
opts = {
	len: 20,
	count: 50,
	baseTime: 10,
	addedTime: 10,
	dieChance: .05,
	spawnChance: 1,
	sparkChance: .1,
	sparkDist: 10,
	sparkSize: 2,
	color: 'hsl(hue,100%,light%)',
	baseLight: 50,
	addedLight: 10,
	shadowToTimePropMult: 6,
	baseLightInputMultiplier: .01,
	addedLightInputMultiplier: .02,
	cx: w / 2,
	cy: h / 2,
	repaintAlpha: .04,
	hueChange: .1
},
tick = 0,
lines = [],
dieX = w / 2 / opts.len,
dieY = h / 2 / opts.len,
baseRad = Math.PI * 2 / 6;
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, w, h);
function loop() {
	window.requestAnimationFrame(loop); ++tick;
	ctx.globalCompositeOperation = 'source-over';
	ctx.shadowBlur = 0;
	ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);
	ctx.fillRect(0, 0, w, h);
	ctx.globalCompositeOperation = 'lighter';
	if (lines.length < opts.count && Math.random() < opts.spawnChance) lines.push(new Line);
	lines.map(function(line) {
		line.step()
	})
}
function Line() {
	this.reset()
}
Line.prototype.reset = function() {
	this.x = 0;
	this.y = 0;
	this.addedX = 0;
	this.addedY = 0;
	this.rad = 0;
	this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();
	this.color = opts.color.replace('hue', tick * opts.hueChange);
	this.cumulat.........完整代码请登录后点击上方下载按钮下载查看