canvas粒子动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        body{
            background: #45aad7;
            margin: 0%;
            padding: 0%;
        }

        html,body{
            width: 100%;
            height: 100%;

        }

        #myCanvas{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="1000" height="600"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var particles = [];
        for(var i = 0; i < 500; i++){
            particles.push({ //雪花在x y 上的位置和速度，以及雪花的大小和颜色
                x: Math.random()*window.innerWidth,
                y: Math.random()*window.innerHeight,
                vx: (Math.random()*1-.5),
                vy: (Math.random()*1-.5),
                size: 1+Math.random()*2,
               // color: "#FFF"
               color:'#'+('0000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6)
            });
        }

        function timeUpdata(e){
            /*清楚画布区域*/
            context.clearRect(0,0,window.innerWidth,window.innerHeight);
            /*逐一绘制500片雪花*/
            var len = particles.length;
            var particle;
            for(var i = 0; i < 500; i++){
                particle = particles[i];
                particle.x += particle.vx;
                particle.y += particle.vy;

                if(particle.x<=0 || particle.x>=window.innerWidth){
                    particle.vx *= -1;
                 }
                if(particle.y<=0 || particle.y>=window.innerHeight){
                    particle.vy *= -1;
                 }
                context.fillStyle = particle.color; //设置雪花的颜色
                context.beginPath();
                context.arc(particle.x,particle.y,particle.size,0,Math.PI*2,true);
                context.closePath();
                context.fill();// 填充颜色
            }
        }

        setInterval(timeUpdata, 40);//每40ms执行一次timeUpdate函数
    </script>
</body>
</html>
canvas粒子动画效果

猜你喜欢
