canvas下雪背景 html+css+js

实现：

1. 定义标签：

北极光之夜。
    
    

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

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

5.绘制每片雪与雪花：

 /* 创建image元素 */
        var img = new Image();
        /* 设置雪花的地址，只有雪花是用图片表示 */
        img.src = "img/snow.png";
        function draw(){
            /* 遍历数组 */
            for(let i=0;i

6.更新雪的位置：

  function updated() {
            for(let i=0;iy){
                    /* 重新给雪数组赋值 */
                   arr[i]={ x: x*Math.random(),
                y: -10,
                r: Math.random()*5,
                color:`rgba(255,255,255,${Math.random()})`}
                 }
            }
   
        }

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(); 

完整代码：

    
    
    
    
    


    
北极光之夜。