html5 canvas逼真下雪场景动画特效

当前位置:主页 > Html5库 > html5 canvas > html5 canvas逼真下雪场景动画特效
html5 canvas逼真下雪场景动画特效
分享:

    插件介绍

    这是一款使用html5 canvas和少量jquery制作的逼真的下雪场景动画特效场景。该Html5下雪场景动画共有6种特效,有飘雪效果、暴风雪效果、雪花效果等等。每一张下雪效果都制作的十分逼真。

    浏览器兼容性

    浏览器兼容性
    时间:2014-12-29
    阅读:
简要教程

这是一款效果十分逼真的html5 canvas下雪场景动画特效插件。这款下雪特效是基于Jason Brown的 Snowfall jquery plugin 的基础上制作的。在Snowfall jquery plugin插件的基础上,这款html5下雪动画插件插件提供了更多用于控制雪花动画的参数和方法。

HTML结构

首先,要使用这个html5下雪场景动画特效插件,需要在html的头部引入jQuery和jQuery.flipping_gallery.js文件。

<body>
  ..
  <canvas class="snow" width="100%" height="100%"></canvas>
  ..
</body>
                

JAVASCRIPT

通过下面的jQuery代码来调用插件:

$("canvas.snow").let_it_snow({
    speed: 0,
    interaction: true,
    size: 2,
    count: 200,
    opacity: 0,
    color: "#ffffff",
    windPower: 0,
    image: false
});
                

通过上面的基本参数设置,该html5 canvas下雪场景插件将自动适应canvas的大小并开始生成下雪动画效果。你所要做的只是将canvas放置在你需要的地方。

下面是一些可用的参数:

  • speed:该参数用于控制雪花飘落的速度。数值越高速度越快。数值设置在0-5之间。默认值为0。
  • interaction:该参数用于设置用户与雪花之间的交互。如果设置为true,那么鼠标和雪花之间将形成一种互斥作用,从而生成一种用户与雪花的交互动作。默认值为true。
  • size:该参数用于设置雪花的平均大小。数值越高雪花越大。数值设置在0-10之间。默认值为2。
  • count:该参数用于设置统一时间在屏幕中的雪花的数量。默认值为200。
  • opacity:该参数用于设置雪花的平均透明度。设置为1,雪花完全不透明。数值设置在0.0到1.0之间。默认值为0。
  • color:该参数用于设置雪花的颜色。可用的格式为6个字母的HEX颜色格式。默认值为"#FFFFFF"。
  • windPower:该参数用于设置风吹的方向。如果你想风吹向右边,设置为正数。如果想风吹向其它方向,设置为负数。数值越大(正数)/数值越小(负数),风吹动的越厉害。默认值为0。
  • image:你可以使用一张雪花图片来代替默认的圆形雪花。该参数是图片的URL,设置为false表示使用默认的圆形图像。默认值为false。

html5 canvas下雪场景动画特效图片制作的雪花

贵州快3

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!