<html>
<head>
<meta charset="utf-8">
<title>彩虹色块形成隧道Canvas特效 - 站长素材</title>
<style type="text/css">
body, html {
background-color:#111;
overflow:hidden;
margin:0 0;
}
#c {
position:absolute;
top: calc(50vh - 200px);
left: calc(50vw - 200px);
}
#alpha {
position:absolute;
top: calc(50vh + 220px);
left: calc(50vw - 50px);
width:100px;
height:40px;
background-color: #000;
border:none;
font:20px Verdana;
color:white;
text-shadow:0 0 2px white;
cursor:pointer;
transition:.4s;
}
#alpha:focus {
outline:none;
}
#alpha:hover {
background-color: #555;
}
#overlay {
position: absolute;
width: 400px;
height: 400px;
top: calc(50vh - 200px);
left: calc(50vw - 200px);
background-image: radial-gradient(transparent 20%, #111 69%);
}
</style>
</head>
<body>
<canvas id=c></canvas>
<button id=alpha>alpha</button>
<div id=overlay></div>
<script>
var w = c.width =
h = c.height = 400,
ctx = c.getContext('2d'),
total = 50,
particlesParRow = 10,
minValue = 30,
updatesBeforeStart = 500,
repaintColor = 'rgba(0, 0, 0, .04)',
templateColor = 'hsl(hue, 80%, 50%)',
particles = [],
colors = [],
radiants = [],
colorPart = 360/total,
radiantPart = Math.PI*2/total,
alphaValue = true;
for(var i = 0; i < total; ++i){
var array = [];
particles.push(array);
colors.push(templateColor.replace('hue', colorPart * i));
radiants.push(radiantPart * i);
for(var j = 0; j < particlesParRow; ++j){
array.push(i * minValue);
}
}
for(var i = 0; i < updatesBeforeStart; ++i) update();
function anim(){
window.requestAnimationFrame(anim);
ctx.fillStyle = repaintColor;
ctx.beginPath();
ctx.arc(w/2, h/2, w/2 + 1, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
ctx.translate(w/2, h/2);
ctx.rotate(.006);
ctx.translate(-w/2, -h/2);
for(var i = 0; i < total; ++i){
ctx.fillStyle = colors[i];
for(var j = 0; j < particlesParRow; ++j){
var particle = particles[i][j];
particles[i][j] -= particle/70;
ctx.beginPath();
ctx.arc(w/2, h/2, particle, radiants[i], radiants[i] + radiantPart);
ctx.arc(w/2, h/2, particles[i][j], radiants[i] + radiantPart, radiants[i], true);
ctx.closePath();
ctx.fill();
if(particles[i][j] <= minValue && Math.random() < .1){
particles[i][j] = w/2;
}
}
}
}
anim();
function update(){
for(var i = 0; i < total; ++i){
for(var j = 0; j < particlesParRow; ++j){
var particle = particles[i][j];
particles[i][j] -= particle/70;
if(particles[i][j] <= minValue && Math.random() < .1){
particles[i][j] = w/2;
}
}
}
}
alpha.addEventListener('click', function(){
if(alphaValue){
alphaValue = false;
repaintColor = 'black';
alpha.textContent = 'solid';
} else {
alphaValue = true;
repaintColor = 'rgba(0, 0, 0, .04)';
alpha.textContent = 'alpha';
}
})
</script>
<div style="text-align:center;margin:20px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：Chrome、FireFox、360、搜狗、Opera、傲游. 不支持Windows版Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
