canvas下雪背景 html+css+js

一时失言乱红尘 2022-11-12 04:23 173阅读 0赞

## 先看效果： ##

![在这里插入图片描述][20210322211021516.gif_pic_center]

## 实现： ##

**1. 定义标签：**

<h1>北极光之夜。</h1>
        <div class="bg"></div>
        <canvas id="canvas"></canvas>

h1是标题，.bg是背景图，canvas是画布。

**2. 开始js部分，先获取画布：**

var canvas = document.getElementById("canvas");
     var ctx = canvas.getContext("2d");

**3.定义常量与数组，看注释：**

/* 定义x为窗口宽度，y为窗口高度 */
            var x = 0 ,y=0;      
            /* 定义数组，是为了存储每一片雪的信息 */
            var arr=[];
            /* 假设有600片雪 */
            var num=600;

**4.初始化数组，给每片雪花定义随机位置坐标（x，y）与半径（r）与一个颜色（color）：**

for(let i=0;i<num;i++){ 
                arr.push({ 
                    x: x*Math.random(),
                    y: y*Math.random(),
                    r: Math.random()*5,
                    color:`rgba(255,255,255,${ Math.random()})`
                })
            }

Math.random（）会返回0到1间的一个随机数。

**5.绘制每片雪与雪花：**

/* 创建image元素 */
            var img = new Image();
            /* 设置雪花的地址，只有雪花是用图片表示 */
            img.src = "img/snow.png";
            function draw(){ 
                /* 遍历数组 */
                for(let i=0;i<num;i++){ 
                    var yuan = arr[i];     
                    /* 创建路径 */          
                     ctx.beginPath();
                     /* 给雪设置颜色 */
                     ctx.fillStyle = yuan.color;
                     /* 绘制雪 */
                    ctx.arc(yuan.x,yuan.y,yuan.r,0,2*3.14,false); 
                    /* 如果i%30==0才绘制雪花，雪花不用太多 */          
                    if(i%30==0){ 
                        /* 绘制雪花图片 */
                    ctx.drawImage(img,yuan.x,yuan.y,yuan.r*10,yuan.r*10);
                    }
                    /* 填充路径 */
                    ctx.fill();
                }
            }

**6.更新雪的位置：**

**7.设置动画：**

setInterval(function(){ 
                /* 清屏 */
                ctx.clearRect(0,0,x,y);
                /* 绘制 */
                draw();
                /* 更新 */
                updated(); 
            },10)

**8.完善，让x与y自适应窗口宽度，调用下面函数便可：**

/* 绑定窗口大小发生改变事件，让canvas随时铺满浏览器可视区 */
          window.onresize=resizeCanvas;
            function resizeCanvas(){ 
                x=canvas.width=window.innerWidth;
                y=canvas.height=window.innerHeight;
            }
            resizeCanvas();

## 完整代码： ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; } .bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(img/52.jpg); background-size: cover; z-index: -10; } h1{ position: absolute; top: 50%; left: 50%; transform: translate(-42%,-50%); font-family: 'fangsong'; font-size: 6em; color: rgba(255, 255, 255, 0.5); text-shadow: 0 0 10px rgb(255,255,255); } </style>
    </head>
    <body>
        <h1>北极光之夜。</h1>
        <div class="bg"></div>
        <canvas id="canvas"></canvas>
        <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); /* 定义x为窗口宽度，y为窗口高度 */ var x = 0 ,y=0; /* 定义数组，是为了存储每一片雪与雪花的信息 */ var arr=[]; /* 假设有600片雪 */ var num=600; /* 绑定窗口大小发生改变事件，让canvas随时铺满浏览器可视区 */ window.onresize=resizeCanvas; function resizeCanvas(){ x=canvas.width=window.innerWidth; y=canvas.height=window.innerHeight; } resizeCanvas(); for(let i=0;i<num;i++){ arr.push({ x: x*Math.random(), y: y*Math.random(), r: Math.random()*5, color:`rgba(255,255,255,${ Math.random()})` }) } /* 创建image元素 */ var img = new Image(); /* 设置雪花的地址，只有雪花是用图片表示 */ img.src = "img/snow.png"; function draw(){ /* 遍历数组 */ for(let i=0;i<num;i++){ var yuan = arr[i]; /* 创建路径 */ ctx.beginPath(); /* 给雪设置颜色 */ ctx.fillStyle = yuan.color; /* 绘制雪 */ ctx.arc(yuan.x,yuan.y,yuan.r,0,2*3.14,false); /* 如果i%30==0才绘制雪花，雪花不用太多 */ if(i%30==0){ /* 绘制雪花图片 */ ctx.drawImage(img,yuan.x,yuan.y,yuan.r*10,yuan.r*10); } /* 填充路径 */ ctx.fill(); } } function updated() { for(let i=0;i<num;i++){ var yuan = arr[i]; /* x轴位置+0.1，变化小点 */ yuan.x = yuan.x + 0.1; /* y轴位置+自身半径一半，这样越大的学走越快 */ yuan.y = yuan.y+yuan.r/2; /* 如果学已经走出窗口 */ if(yuan.y>y){ /* 重新给雪数组赋值 */ arr[i]={ x: x*Math.random(), y: -10, r: Math.random()*5, color:`rgba(255,255,255,${ Math.random()})`} } } } setInterval(function(){ /* 清屏 */ ctx.clearRect(0,0,x,y); /* 绘制 */ draw(); /* 更新 */ updated(); },10) </script>
    </body>
    </html>

## 总结： ##

canvas我也是在初学，有不对地方请大佬指正~~

[20210322211021516.gif_pic_center]: /images/20221022/7df422e8e4e34ae699de7c1ccf5c0fe2.png