怎样运用HTML5canvas实现雪花飘零-
看到网上许多展现html5雪花飞动的结果，的确非常令人着迷，我信赖大家也跟我同样看着心动的同时，也非常不错奇，想研究下代码怎样实现；虽然许多地方也能下载这些源码，不外也不晓得他人制作此类动画时的思绪及难点剖析。
我这几天恰好学习了一下，也趁着现在有工夫从需求剖析、见识点、程序编写一步步给大家解剖下，如果在各位关公眼前耍大刀了，可别笑话哟。
终究结果图如下：
图1
一、需求剖析
1、圆形雪花
本示例中雪花外形运用圆形
2、雪花数目牢固
依据图1细心调查白色雪花数目，飘零历程中，整张图的雪花数目应当是牢固的，这个需求是需要通过我们调查剖析所得。这与我们实际生活中看到一幅雪花满天飞的场景是一致的。
3、雪花大小纷歧致
每朵雪花它们大小各有不一样，也就意味着雪花的半径是随机的。这与我们实际生活中看到一幅雪花满天飞的场景也是一致的。
4、雪花位置在挪移
雪花飘零，天然它们的位置也在挪移。
二、见识点
1、运用Html5 Canvas+JavaScript画圆——形成圆形雪花
在Html5中，需要运用Canvas同时借助JavaScript画圆，以形成圆形雪花——arc(x,y,r,start,stop)；
2、随机数—发生不一样半径、坐标的圆形雪花
本示例中，网页首先次加载时，需要生成一定数目的不一样半径及位置的雪花，故半径、坐标为随机数；雪花在飘零历程中，其半径不变，坐标在一定幅度内变化，故此时坐标也为随机数——Math.random()
三、程序编写
1、预备工作
放一个画布canvas，而且设定整个body配景色为玄色
HTML代码：
CSS代码：
* {
margin: 0;
padding: 0;
}
#mycanvas {
background: black;
}此时结果如如下：
注意：canvas默许是有一个初始化高度和宽度的，所以不消去纠结
2、画弥漫屏显示
JavaScript代码如下：
//猎取mycanvas画布
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
//画布宽度
var wid = window.innerWidth;
//画布高度
var hei = window.innerHeight;
can.width=wid;
can.height=hei;此时结果如如下：
3、初始化生成牢固数目的雪花
依据我们上述需求剖析及见识点解读，第一雪花的数目是牢固的，所以我们需要定义一个变量var snow = 100；这里假如雪花数目为100,；
生成雪花的时候，每个雪花半径、位置都不一样，我们把每个雪花当成一个对象，那么这个对象的属性就包括：半径、坐标（X、Y），那么一个雪花对象可以写成var snowOject={x:1,y:10,r:5}，这里就代表一个坐标为(1,10)半径为5的圆形雪花；本示例中因为半径和坐标都为随机数，故运用Math.random()离别为100个雪花生成半径、坐标（X、Y）；
那我们这里是100个雪花，所认为了利便背面操纵，就用一个数组保留这100个雪花对象。
JavaScript代码如下：
//雪花数量
var snow = 100;
//雪花坐标、半径
var arr = []; //保留各圆坐标及半径
for (var i = 0; i < snow; i++) {
arr.push({
x: Math.random() * wid,
y: Math.random() * hei,
r: Math.random() * 10 + 1
})
}4、绘制雪花
上面我们已经将100个雪花半径、坐标（X、Y）生成，下面就是轮回运用canvas画出雪花了（这里就是画圆），这里定义一个函数
JavaScript代码如下：
//画雪花
function DrawSnow() {
ctx.fillStyle="white";
ctx.beginPath();
for (var i = 0; i < snow; i++) {
var p = arr[i];
ctx.moveTo(p.x,p.y);
ctx.arc(p.x,p.y,p.r,0,2*Math.PI,false);
}
ctx.fill();
ctx.closePath();然后调取 DrawSnow()函数，结果如下：
可以尝试屡次刷新网页看可否会生成不一样大小、位置的雪花（正常状况下是可以的），做到这里就已经接近终究结果了
注意：因为这里需要绘制100个圆，所以每当画一个圆时从新定义绘制开端坐标即：ctx.moveTo(p.x,p.y);不然会涌现异常结果，不信可以试试呀
5、雪花飘动
上面我们已经画出100个雪花，惋惜只能依托刷新网页才干看到变化结果，但是我们需要实现的是雪花不绝的挪移位置。
第一我们需要借助setInterval函数不绝的重画雪花，这里隔断工夫为50毫秒：setInterval(DrawSnow,50);
同时每一朵雪花的坐标（X、Y）需要不绝的转变（在一定幅度内），我们这里的雪花是从左上方飘零到右下方，所以每朵X、Y坐标值都在不绝的增大，那我们用一个函数SnowFall()定义雪花飘过法则
该函数代码如下：
//雪花飘零
function SnowFall() {
for (var i = 0; i < snow; i++) {
var p = arr[i];
p.y += Math.random() * 2 + 1;
if (p.y > hei) {
p.y = 0;
}
p.x += Math.random() * 2 + 1;
if (p.x > wid) {
p.x = 0;
}
}
}然后将该函数放入DrawSnow()施行，注意：我们每隔50毫毛重画雪花，必需擦除画布，所以DrawSnow()函数体内必需在前面施行clearRect()函数，即：ctx.clearRect(0, 0, wid, hei);
此时DrawSnow函数定义如下：
//画雪花
function DrawSnow() {
ctx.clearRect(0, 0, wid, hei);
ctx.fillStyle = "white";
ctx.beginPath();
for (var i = 0; i < snow; i++) {
var p = arr[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);
}
ctx.fill();
SnowFall();
ctx.closePath();
}最后施行setInterval(DrawSnow, 50);
OK，经过我们上述步骤，小同伴们可否已经对整个历程及技术实现很清晰了。
完备代码如下（大家可以直接复制到本人项目中施行，测试下结果）：
打赏
