动手学Javascript（3）——HTML5模拟下雪

最新推荐文章于 2021-06-04 03:20:40 发布

何海涛

最新推荐文章于 2021-06-04 03:20:40 发布

阅读量4.1k

点赞数 3

分类专栏： Javascript 文章标签： javascript html5 动画 canvas

本文链接：https://blog.csdn.net/haitaohe/article/details/17503813

版权

本文通过HTML5的Canvas实现了一个简单的下雪动画，庆祝圣诞节。雪花以白色圆形呈现，沿正弦曲线缓缓飘落，营造出温馨的节日氛围。读者可以通过链接查看动态效果或下载源代码进行学习。

摘要由CSDN通过智能技术生成

马上就是圣诞节，基于HTML5的Canvas写个网页动画，祝大家圣诞节快乐。

在该网页中动画中，用简单的模型模拟下雪的场景，其截屏效果如下图所示。如果你想看动画的动态效果，也可以到网页http://jsfiddle.net/zhedahht/2uD5x/1/ 查看。

雪花被简化成一个白色的圆形，并按照正弦曲线缓慢降落。这个模型虽然简单，但效果基本满足卡通动画的要求。代码如下：

$(document).ready(function () {
    makeSnow("christmasSnow", "./Image/Christmas.jpg");
});

function makeSnow(canvasId, imagePath) {
    var christmasSnow = new ChristmasSnow(canvasId, imagePath);
    
    renderAndUpdate.christmasSnow = christmasSnow;
    setInterval(renderAndUpdate, 15);
}

function renderAndUpdate() {
    renderAndUpdate.christmasSnow.render();
    renderAndUpdate.christmasSnow.update();
}

function ChristmasSnow(canvasId, imagePath) {
    var snowEl