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);
/* 如果i0==0才繪制雪花，雪花不用太多 */
if(i0==0){
/* 繪制雪花圖片 */
ctx.drawImage(img,yuan.x,yuan.y,yuan.r*10,yuan.r*10);
}
/* 填充路徑 */
ctx.fill();
}
}
6.更新雪的位置：
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()})`}
}
}
}
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);
/* 如果i0==0才繪制雪花，雪花不用太多 */
if(i0==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>
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
