转载

HTML5 canvas逼真的液体融合动画特效

简要教程

这是一款使用HTML5 canvas和javascript制作的非常逼真的液体融合动画特效。该特效会随机生成一些液体物质,并随机生成颜色。这些液体物质会不断的进行融合,也可以使用鼠标来和这些液体进行交互。

HTML5 canvas逼真的液体融合动画特效

在线演示     下载插件

制作方法

HTML结构

该液体融合动画特效使用一个 <canvas> 来制作。

  1. <canvas id= "c"> </canvas>
复制代码

HTML5 canvas逼真的液体融合动画特效

HTML5 canvas逼真的液体融合动画特效

CSS样式

特效中的CSS样式比较简单,画布设置为固定宽度和高度,并居中对齐。
  1. #c {
  2. width:800px;
  3. height:376px;
  4. margin:0 auto;
  5. display:block;
  6. }
复制代码
其它的都是一些常规设置。 液体的生成和融合效果是在js代码中完成的,具体代码请参考下载文件。 文章转载来源: http://www.htmleaf.com/html5/html5-canvas/201506162046.html
正文到此结束
Loading...