canvas:下雪

最新推荐文章于 2022-11-17 15:17:55 发布

大阿冬

最新推荐文章于 2022-11-17 15:17:55 发布

阅读量252

点赞数 1

本文链接：https://blog.csdn.net/xswlXAD/article/details/95039175

版权

demo

HTML

<body>
<canvas id="canvas" width="1000" height="750" style="background-color: gainsboro"></canvas>
</body>

JS 行为定义canvas的渲染

<script>
    (()=>{
        document.addEventListener('DOMContentLoaded',function(){
            //业务
            let canvas = document.querySelector('#canvas');
            let ctx = canvas.getContext('2d');
            let circles = [];

            setInterval(function () {
                genareteCircle();
            },50);

            setInterval(function () {
                circleRun();
            },16);
            //生成雪花
            function genareteCircle() {
                let circle = {};
                circle.x = Math.floor(Math.random()*canvas.width);
                circle.y = Math.floor(Math.random()*canvas.height);
                // circle.y = 0;
                circle.r = Math.ceil(Math.random()* 10);
                circle.deltay = 0;
                // circle.r = 8;
                circle.color = {};
                circle.color.r = Math.floor(Math.random()*256);
                circle.color.g = Math.floor(Math.random()*256);
                circle.color.b = Math.floor(Math.random()*256);
                circle.color.a = 1;
                circles.push(circle);
            }
            // 雪花运动
            function circleRun(){
                ctx.clearRect(0,0,canvas.width,canvas.height);
                circles.forEach(function (circle, index) {
                    
                    //增量逐渐增加
                    circle.deltay++;

                    ctx.beginPath();
                    //绘制圆的圆心坐标逐渐增大（视觉上逐渐下降）
                    ctx.arc(circle.x,(circle.y+circle.deltay),(circle.r),0,Math.PI*2);
                    ctx.fillStyle = 'rgba('+circle.color.r+','+circle.color.g+','+circle.color.b+','+circle.color.a+')';
                    ctx.fill();
                });
            }
        });
    })();
</script>

哎呀，效果很抽象，但雪花的行为是有了，好不容易可以写写博客了，虽然差不多只有我自己看，?