canvas 的一些效果
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
body{
background:green;
}
#div{
position: absolute;
z-index: -1;
top:0;
}
</style>
</head>
<body>
<div id="div" style="width: 100%;height:100%">
</div>
<script>
var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'canvas');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
div.appendChild(canvas);
var canvas = document.getElementById('canvas');
var particles = [];
var tick = 0;
var lineRadius = 100;
function loop() {
createParticles();
updateParticles();
killParticles();
drawParticles();
drawLine();
}
function createParticles() {
//check on every 10th tick check
if(tick % 10 == 0) {
if(particles.length < 100) {
particles.push({
x: Math.random()*canvas.width,
y: 0,
speed: 2+Math.random()*3, //between 2 and 5
radius: 5+Math.random()*5, //between 5 and 10
color: "white",
speed_x:Math.random()>=.5?-Math.random()*3:Math.random()*3
});
}
}
}
function updateParticles() {
for(var i in particles) {
var part = particles[i];
part.y += part.speed;
part.x += part.speed_x;
}
}
function killParticles() {
for(var i in particles) {
var part = particles[i];
if(part.y > canvas.height) {
part.y = 0;
}
if(part.x >= canvas.width||part.x<=0) {
part.x = Math.random()*canvas.width;
}
}
}
function drawLine(){
for(var i in particles){
var part_i = particles[i];
for (var j in particles){
if(j>i){
var part_j = particles[j];
if(square(part_i.x-part_j.x)+square(part_i.y-part_j.y)<=square(lineRadius)){
var c = canvas.getContext('2d');
c.beginPath();
c.lineWidth = .3;
c.strokeStyle = "white";
c.moveTo(part_i.x, part_i.y);
c.lineTo(part_j.x,part_j.y);
c.stroke();
c.closePath();
}
}else continue;
}
}
}
function square(x){
return x*x;
}
function drawParticles() {
var c = canvas.getContext('2d');
c.fillStyle = "green";
c.globalAlpha = 0.1;
c.fillRect(0,0,canvas.width,canvas.height);
for(var i in particles) {
var part = particles[i];
var radialGradient = c.createRadialGradient(part.x,part.y,part.radius/4,part.x,part.y,part.radius);
radialGradient.addColorStop(0,'rgba(255,255,255,.8)');
radialGradient.addColorStop(.5,'rgba(255,255,255,.5)');
radialGradient.addColorStop(1,'rgba(255,255,255,.3)');
c.beginPath();
c.arc(part.x,part.y, part.radius, 0, Math.PI*2);
c.closePath();
c.fillStyle = radialGradient;
c.fill();
}
}
setInterval(loop,30);
</script>
</body>
</html>
这个
globalAlpha很有意思，设置值时移动的 小点会出现 尾巴，值越小 尾巴越长，像.....
