Canvas下雪效果实现

原创 dean8 随笔 Javascript笔记 441阅读 2017-12-29 18:03:59 举报

想用js来写一个下雪效果并不难,但是如果要兼顾到效果的逼真度,流畅度,用户体验那就需要好好思考一下了,至少有几个问题需要想清楚:

1、绘制是用dom来做还是canvas等别的技术?

如果使用dom来绘制,那么会有性能上的瓶颈,在动态控制的节点较少时,看不太明显,但是满屏的雪花肯定是会有一些能感知的卡顿的,但反观canvas,其运行会被硬件加速,流畅度会好很多。

2、雪花素材是使用图片还是用canvas亦或是svg?

如果选择用dom来做,那么最简单的做法就是使用图片,当然也可以使用canvas或者svg,这种情况这里不做详细说明,重点说一下选用canvas我们应该选用图片素材还是直接绘制,利用canvas我们也是可以轻松绘制出雪花的,可参考我之前的一片文章《js分形艺术-koch雪花曲线》,但是这种绘制雪花的方法是通过迭代来实现的,其性能肯定不好,想一想满屏的雪花呀,cpu不得被疯吃,所以这里建议采用图片素材。

想明白了这些,其实现就相对简单了,下雪无非就是坐标的更新罢了,当然为了尽可能逼真中间还是有一些小细节需要注意,比如雪花的飘落方向,有可能忽左忽右吧,比如雪花有可能有大有小吧等等, 下面贴出我的实现代码:
javascript 代码

使用方式只需要将上面代码保存为js文件,然后在任意一个html文件中引用就可以了.
效果和雪花素材图可以到http://www.deanhan.cn/canvas-snow.html查看。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复