HTML5網(wǎng)頁下雪代碼
在網(wǎng)頁上添加下雪效果可以讓網(wǎng)頁更加有趣。下面是一個簡單的HTML5下雪代碼，你可以把它復制到你的網(wǎng)頁中嘗試。
<!DOCTYPE html>
<html>
<head>
<title>下雪效果</title>
<meta charset="UTF-8">
<style type="text/css">
body{
background-color:#000000;
}
canvas{
background-color:#000000;
position:fixed;
top:0;
left:0;
}
</style>
</head>
<body>
<canvas id="snow"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("snow");
var ctx=canvas.getContext("2d");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
var snowflakes=[];
for(var i=0;i<100;i++){
snowflakes.push({
x:Math.random()*canvas.width,
y:Math.random()*canvas.height,
r:Math.random()*4+1,
s:Math.random()*3+1
});
}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle="#FFFFFF";
ctx.beginPath();
for(var i=0;i<snowflakes.length;i++){
var snowflake=snowflakes[i];
ctx.moveTo(snowflake.x,snowflake.y);
ctx.arc(snowflake.x,snowflake.y,snowflake.r,0,Math.PI*2,true);
}
ctx.fill();
move();
}
function move(){
for(var i=0;i<snowflakes.length;i++){
var snowflake=snowflakes[i];
snowflake.y+=snowflake.s;
if(snowflake.y>canvas.height){
snowflake.y=0;
}
}
}
setInterval(draw,50);
</script>
</body>
</html>