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（）；

完整程式碼：

<！DOCTYPE html>

北極光之夜。