Canvas画雪花图~

最新推荐文章于 2025-02-21 16:40:04 发布

weixin_40197429

最新推荐文章于 2025-02-21 16:40:04 发布

阅读量1k

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_40197429/article/details/80463848

版权

js 专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何使用HTML5 Canvas元素来创建雪花动画效果。作者提到关键在于设置body背景色和canvas尺寸，控制雪花数量，并在每次绘制前清除画布。通过判断雪花位置确保其在窗口范围内移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<canvas id="myCanvas">你的浏览器不支持canvas</canvas>

额….记得给body设置个颜色，你才能看到效果，还有给canvas画布设置一个大小。

var canvas=document.querySelector("#myCanvas");
snow(canvas);
//canvas这个参数是获取的dom元素，
function snow(canvas){
    var context=canvas.getContext('2d');
    //微粒子创建数组
    var particles=[];
    for(var j=0;j<500;j++){
        particles.push({//设置雪花的初始位x，y  x,y向上的速度，以及雪花的大小颜色，随机生成的
            x:Math.random()*window.innerWidth,
            y:Math.random()*window.innerHeight,
            vx:Math.random()*1-0.5,
            vy:Math.random()*1+0.5,
            size:1+Math.random()*2,
            color:'#fff'
        })
    }
    //进行绘制
    function timeUp(){
        context.clearRect(0,0,window.innerWidth,window.innerHeight);
        //清除画布
        var particle;
        for(var i=0;i<500;i++){//遍历所有的雪花
            particle=particles[i];
            particle.x+=particle.vx;//更新雪花的新的x,y位置
            particle.y+=particle.vy;
            if(particle.x<0){
                particle.x=window.innerWidth;//如果雪花的位置放在了左侧意外，然后使其显示在窗口右边
            }
            if(particle.x>window.innerWidth){
                particle.x=0;
            }
            if(particle.y>=window.innerHeight){
                particle.y=0;
            }
            //设置雪花颜色
            context.fillStyle=particle.color;
            context.beginPath();//开始绘制雪花
            context.arc(particle.x,particle.y,particle.size,0,Math.PI*2);//绘制圆形
            context.closePath();//必和路径
            context.fill();
        }
    }
    setInterval(timeUp,40);
}