代码来源于潭州免费java视频教程<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>雪花</title>
<style type="text/css">
*{margin:0;padding:0;}
body{overflow:hidden;background:url("snow2.jpg")no-repeat;background-size:cover;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
//取得画板
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//ctx.beginPath();
//ctx.lineWidth=1;//线条粗细
//ctx.strokeStyle="red";//线条颜色
//ctx.arc(100,100,30,0,Math.PI*2);//ctx.arc(x,y,r,startangle,endangle);
//ctx.stroke();
var screen=window.screen;//取得窗口屏幕
var w=screen.width;
var h=screen.height;
canvas.width=w;
canvas.height=h;
var numberofsnow=200;//雪球个数
var snow=[];
for(var i=0;i<numberofsnow;i++){
snow.push({
x:Math.random()*w,
y:Math.random()*h,
r:Math.random()*5
})
}
function draw(){
ctx.shadowColor="#fff";//阴影颜色,白色让雪球发光
ctx.shadowBlur=10;//阴影模糊级数，越高越模糊
ctx.clearRect(0,0,w,h);//清除画布
ctx.fillStyle="#fff";//randomColor();//填充色
ctx.strokeStyle="rgba(255,255,255,0.5)";//线条颜色，0.5是alpha透明度
ctx.beginPath();
for(var i=0;i<numberofsnow;i++){
var p=snow[i];
ctx.moveTo(p.x,p.y);
ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
}
ctx.fill();
ctx.stroke();
update();
}
draw();
function update(){
for(var i=0;i<numberofsnow;i++){
var p=snow[i];
p.y+=Math.random()*10;
if (p.y>h){
p.y=0;
}
}
}
setInterval(draw,100);
function randomColor(){//雪花动态变色
var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
var rgb="rgb("+r+","+g+","+b+")";
return rgb;
}
</script>
</body>
</html>
时间： 2024-10-12 13:43:46