需求分析
你有没有看过那些超炫的HTML5雪花飞舞特效？是不是也想过这些看起来美轮美奂的动画是怎么做出来的？别担心，下面就给你详细说说，HTML5Canvas如何创造这种奇妙的景象。首先，要解析好需求，认真想想，比如雪花有多少？每个雪花都多大？它们在画布上的位置又是随机的吗？当然，这只是一个基础的想法，具体细节还需要仔细研究。
知识点解读
用HTML5里的Canvas跟JavaScript编程序的话，可以做出好多炫酷的动画效果~想做下雪这种效果，就得画那个会旋转的圆圈形雪花。我们可以借助Math.random()这个函数弄出随机的东西，比如大大小小的雪花和它们飘散的位置。当然了，编程的时候别忘了先初始化好Canvas，后面还要画出100片不一样大、所处位置也各有特色的雪花。
程序编写步骤
1.定义变量snow表示雪花数量为100。
2.创建一个数组来保存100个不同半径和位置的雪花对象。
3.使用Canvas画布，并设置背景色为黑色。
4.编写函数DrawSnow()来循环绘制100个雪花。
用setInterval搞个小间隔，让雪花一直动起来，效果
6.编写SnowFall()函数来定义雪花飘落规则。
把clearRect()加进DrawSnow()里，这个功能就是能清空屏幕，然后再开始重新画雪花的。
完整代码示例
javascript
//定义100个不同大小、位置的雪花对象
var snowflakes =[];
我们抽个空，数到99。
var snowflake ={
您的浏览器不支持canvas画布
随机坐标：Math.random()*画布宽度，
y =Math.random()*画布的高度。
* {
margin: 0;
padding: 0;
}
#mycanvas {
background: black;
}
radius: Math.random()* 5 + 1
};
snowflakes.push(snowflake);
}
//获取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;
//绘制100个不同大小、位置的雪花
function DrawSnow(){
把画布全清掉。
然后，从零开始数起，每多一个雪片就递增个位上的数字。
我们就直接用雪花数组里的第i个雪片来代替它，
ctx.beginPath();
在画雪花的时候，我们得先给它定个位置和大小。然后加上角度参数，比如这里的Math.PI *2（相当于整个圆形），让画出的弧线绕一整圈，看起来更像个真正的雪片儿。
ctx.fillStyle ="white";
ctx.fill();
snowflake.y+=1;//雪花向下移动
//雪花数目
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
})
}
}
//雪花飘落规则
function SnowFall(){
//画雪花
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();
snowflakes[i].y+=1;
如果雪球在x轴上的位置离画布顶部很远，就调整下。
snowflakes[i].y=0;
f56ac3d0fc4809ae1c100a6b745ccf4b}
//每50毫秒重绘一次雪花
setInterval(function (){
DrawSnow();
SnowFall();
}, 50);
搞定这几步，咱们就能做一下HTML5 Canvas里雪花飘落的炫酷小效果了。当然，细心地调一调各种设置和规则，能让效果更丰富立体！
总结与展望
文章教你如何用HTML5 canvas搞出雪花飞舞的效果！从找需求到敲代码，全都说了个遍~希望你们看完能学会如何用canvas跟JavaScript做出让人眼前一亮的动画场景，然后根据自己的需要多加创新和完善！
在以后，咱们可以试试加些互动，提提速，玩点新鲜的动效啥的来拓宽下自己的创作路子。只要多学多练，你我都能弄出更赞的HTML5动画作品！
//雪花飘落
function SnowFall() {
for (var i = 0; i hei) {
p.y = 0;
}
p.x += Math.random() * 2 + 1;
if (p.x > wid) {
p.x = 0;
}
}
}
评论0