html5 canvas圣诞雪花网页背景代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5 canvas圣诞雪花网页背景代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>html5 canvasʥ��ѩ����ҳ��������</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div class="g-body">
    <div style="text-align:center;padding:150px 0 20px 0">
    <p></p>
    <p><div>ʹ�÷�����<br />1����head����������ʽ���ļ�zzsc.css<br />2����head��������&lt;div class=&quot;g-body&quot;&gt;&lt;/div&gt; ��ҳ������������<br />3���������ҳ�м���3��&lt;canvas&gt;ͼ������<br />4������JS &lt;script type=&quot;text/javascript&quot; src=&quot;js/snow.min.js&quot;&gt;&lt;/script&gt;<br />5������ͼƬ����ҳ��������и����Լ��������޸ġ�</div></p>
    <p style="margin:20px 0"></p>
    </div>
</div>
<canvas id="snowFallTop" class="snowFall snowFallTop" width="1220" height="162" style="left: 321px;"></canvas>
<canvas id="snowFallLeft" class="snowFall snowFallLeft" width="321" height="742" style="width: 321px;"></canvas>
<canvas id="snowFallRight" class="snowFall snowFallRight" width="321" height="742" style="width: 321px;"></canvas>
<script type="text/javascript" src="js/snow.min.js"></script>
</body>
</html>

JS代码(snow.min.js):

(function(){
	if(navigator.userAgent.indexOf("MSIE 6.0")>0||navigator.userAgent.indexOf("MSIE 7.0")>0||navigator.userAgent.indexOf("MSIE 8.0")>0){
	return}
var f=20;
	var v=0.7;
	var g=0;
	var n=0.8;
	var m=0;
	var d=document.getElementById("snowFallTop");
	var x=document.getElementById("snowFallLeft");
	var e=document.getElementById("snowFallRight");
	var q=d.clientWidth;
	var o=d.clientHeight;
	d.width=q;
	d.height=o;
	b();
	var l=d.getContext("2d");
	var t=x.getContext("2d");
	var k=e.getContext("2d");
	l.fillStyle="#fff";
	t.fillStyle="#fff";
	k.fillStyle="#fff";
	g=o*v;
	m=(o-g)*n;
	var h=function(){
	this.x=0;
	this.y=0;
	this.velocityX=0;
	this.velocityY=0;
	this.radius=0;
	this.transparency=0;
	this.clientWidth=0;
	this.clientHeight=0;
	this.reset()}
;
	h.prototype.reset=function(){
	this.x=Math.random()*this.clientWidth;
	this.y=Math.random()*-this.clientHeight;
	this.velocityX=0.5-Math.random();
	this.velocityY=(1+Math.random())*3;
	this.radius=(1+Math.random())*2;
	this.transparency=(0.5+Math.random())*0.5}
;
	var u=[],c,a=[],w=[],p=[];
	for(var r=0;
	r<f;
	r+=1){
	a.push(i(new h(),d));
	w.push(i(new h(),x));
	p.push(i(new h(),e))}
function i(z,y){
	z.clientWidth=y.width;
	z.clientHeight=y.height;
	z.reset();
	return z}
function j(){
	l.clearRect(0,0,d.width,d.height);
	t.clearRect(0,0,x.width,x.height);
	k.clearRect(0,0,e.width,e.height);
	s(l,a);
	s(t,w);
	s(k,p);
	requestAnimFrame(j)}
function s(B,y){
	var z=null;
	for(var A=0;
	A<f;
	A+=1){
	z=y[A];
	z.x+=z.velocityX;
	z.y+=z.velocityY;
	B.globalAlpha=z.transparency;
	B.beginPath();
	B.arc(z.x,z.y,z.radius,0,Math.PI*2,false);
	B.closePath();
	B.fill();
	if(z.y>z.clientHeight){
	z.reset()}
}
}
function b(){
	d.style.left=((document.body.clientWidth-1220)/2)+"px";
	if(document.body.clientWidth-1220>20){
	x.width=(document.body.clientWidth-1220)/2;
	x.height=742;
	x.style.width=x.width+"px";
	e.width=(document.body.clientWidth-1220)/2;
	e.height=742;
	e.style.width=x.width+"px"}
}
window.requestAnimFrame=(function(){
	return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(y){
	window.setTimeout(y,1000/60)}
}
)();
	requestAnimFrame(j);
	window.addEventListener("resize",function(){
	b();
	l.fillStyle="#fff";
	t.fillStyle="#fff";
	k.fillStyle="#fff"}
,false)}
)();

CSS代码(zzsc.css):

body{margin:0;font-size:12px;line-height:1.666;}
.g-body{background:url("../images//body_bg.png") center top no-repeat;background-color:#FFF;height:1000px}
.toolbar{height:31px;line-height:29px;color:#8e8e8e;background:#f5f6f8;display:block;text-align:center}
/* ��ҳ */
.snowFall{position:absolute;top:0;z-index:3;pointer-events:none;_display:none;color:#ffffff;}
.snowFallTop{left:0;width:1220px;height:162px;}
.snowFallLeft{left:0;height:742px;z-index:3;}
.snowFallRight{right:0;height:742px;z-index:3;}

附件:下载该文件资源,减少时间成本(增值服务)