canvas 的一些效果

时间：2023-03-09 03:28:20
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很有意思，设置值时移动的 小点会出现 尾巴，值越小 尾巴越长，像.....

相关文章