html画布canvas,
本文实例讲述了基于html5画布实现漫天飞雪效果的方法，运行该实例可以看到很棒的下雪效果。如下图所示：
主要代码如下：
复制代码代码如下：DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN a href= http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。DTD http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。 DTD/a
html xmlns= a href= http://。w3。org/1999/XHTML http://www。w3。 org/1999/XHTML/a
头
meta http-equiv= Content-Type Content= text/html；charset=gb2312 /
标题漫天飞雪/标题
style type=text/css
* {边距：0;填充：0;}/ppbody {
/*你可以在这里使用任何类型的背景。*/
背景：# 6b92b9
}
画布{
显示：块；
}
/风格
/head/PP body/PP div style= background:# 6b 92b 9；宽度：100%;高度：2000像素；/div
画布id= canvas style= position:fixed；top:0px；左：0pxz指数：80;指针事件：无；/canvas/ppscript
window.onload=function(){
//画布初始化
var canvas=文档。getelementbyid(“canvas”)；
var CTX=画布。获取上下文(“2d”)；
//画布尺寸
var W=window.innerWidth
var H=window.innerHeight
画布。宽度=W；
画布。高度=H；
//雪花粒子
var mp=3000//最大粒子数
定义变量粒子=[];
for(var I=0；我MP；我)
{
particles.push({
x: Math.random()*W，//x坐标
y: Math.random()*H，//y坐标
r: Math.random()*3 1，//radius
d:数学。random()* MP//密度
})
}
//让我们画出雪花
函数绘制()
{
ctx.clearRect(0，0，W，H)；
ctx.fillStyle=rgba(255，255，255，0.8)；
/* CTX。填充样式= # ff 0000*/
CTX。begin path()；
for(var I=0；我MP；我)
{
var p=粒子[I]；
ctx.moveTo(p.x，p . y)；
ctx.arc(点x，点y，点r，0，数学* 2，真);
}
CTX。fill()；
update()；
}
//函数来移动雪花
//角度将是一个正在进行的增量标志。正弦和余弦函数将应用于它，以创建垂直和水平运动的薄片
定义变量角度=0;
功能更新()
{
角度=0.01;
for(var I=0；我MP；我)
{
var p=粒子[I]；
//更新X和Y坐标
//我们将在余弦函数中加1,以防止负值导致雪花向上移动
//每个粒子都有自己的密度，可以用来使每个薄片的向下运动不同
//让我们通过增加半径来使它更加随机
p.y=Math.cos(角度p . d)1 p . r/2；
p.x=Math.sin(角度)* 2;
//退出时将薄片从顶部送回
//让它更有机一点，让薄片也从左边和右边进入。
if(p.x W p.x 0 p.y H)
{
if(i%3 0) //66.67%的薄片
{
粒子[I]={ x:数学。random()* W，y: -10，r: p.r，d:p . d }；
}
其他
{
//如果薄片从右侧退出
if(Math.sin(angle) 0)
{
//从泰国(Thailand)开始输入
particles[i]={x: -5，y: Math.random()*H，r: p.r，d:p . d }；
}
其他
{
//从右边进入
particles[i]={x: W 5，y: Math.random()*H，r: p.r，d:p . d }；
}
}
}
}
}
//动画循环
setInterval(draw，15)；
}
/脚本
/body
/html
代码分析如下：
这行代码改变雪花半径大小：
复制代码代码如下：r: Math.random()*3 1，//radius
这行代码改变雪花下落速度：
复制代码代码如下：setInterval(draw，15)；
这条线改变了雪的密度：
复制代码如下：var mp=3000//最大粒子数
相信本文所描述的对大家的html5 WEB编程有一定的参考价值。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。