如何实现超酷的HTML5 Canvas水流样式Loading动画效果？

本文共计1074个文字，预计阅读时间需要5分钟。

今天我们要分享一款基于HTML5+Canvas的流体流动样式Loading加载动画。这款Loading动画在加载时会呈现流体流动的动态效果，并且通过与背景颜色的对比，巧妙地呈现出发光的动态效果。

今天我们要分享另外一款基于HTML5 Canvas的液体流动样式Loading加载动画，这款Loading动画在加载时会呈现液体流动的动画效果，并且由于和背景颜色的对比，也略微呈现发光的动画效果。

效果预览

代码实现

HTML代码

接下来我们讲讲实现这个加载动画的大致思路和实现过程。

首先在页面上定义一个canvas元素，用来承载这个Loading动画的画布。

<canvas id='canvas'></canvas>

接下拉需要定义一个SVG滤镜，这个滤镜用来渲染Loading圈圈粒子化的效果。