前几天我们为大家分享过一款很酷的HTML5 Canvas火焰动画，一起见证了Canvas的强大。这次要分享的这款动画也是基于Canvas实现的，它是一个五彩的发光喷泉动画特效。页面上一共有4个喷泉柱子，并且每个柱子都有在水面上的倒影，喷射出五彩斑斓的喷泉，同喷泉的颜色会随机变化，非常炫酷。
HTML5 Canvas 五彩发光喷泉动画
753 人浏览
2018-07-05 20:00:07
标签归档：HTML5 Canvas
HTML5 Canvas雾状火焰动画
917 人浏览
2018-07-04 22:53:55
我们可以在Canvas上绘制很多图形，也可以利用HTML技术在Canvas上制作一些复杂的动画，之前我们也分享过一些基于HTML5 Canvas的火焰动画，例如这个HTML5 Canvas幻彩火焰文字特效和更早以前分享的HTML5 Canvas火焰燃烧动画。这次我们给大家带来另外一款基于HTML5 Canvas的火焰动画，你可以在Canvas画板上用鼠标点击拖动，便会形成雾状的火焰效果，火焰就像雾霾一样逐渐扩散开来。
HTML5 Canvas弹性文字动画
752 人浏览
2018-06-20 21:19:25
在HTML5中，Canvas上不仅可以绘制图形和动画，还可以实现各种炫酷的文字动画特效。之前分享过一篇文章7款超华丽的HTML5 Canvas文字动画特效，其中就有不少令人惊叹的HTML5文字特效。这次我们给大家分享的也是一款基于HTML5 Canvas的文字动画，这款文字动画是将文字悬挂在富有弹性的细线上，用鼠标拖动文字即可让其在各个方向弹动。
基于Echarts的HTML5 Canvas中国地图
3,854 人浏览
2018-04-20 15:33:25
之前我们分享过几个基于HTML5和SVG的地图应用，例如这款HTML5世界地图利用了SVG的path特性，又比如这款jQuery矢量SVG地图插件JVectorMap同样通过SVG和jQuery实现。这次我们要分享一款基于Echarts的中国地图，底层技术是HTML5 Canvas技术，正是利用了Canvas中绘制图形的便利性，这款中国地图应用可以为每一个省添加描述信息。
HTML5 Canvas带边框的粒子动画进度条
1,077 人浏览
2018-03-31 10:19:25
还记得很早以前，我们分享过一款基于HTML5 Canvas的粒子动画进度条，非常富有创意。今天我们要带来的同样是一款基于HTML Canvas的粒子进度条动画，不同的是这款进度条相对是扁平样式的，进度部分带有细边框。
HTML5 Canvas冰川波浪起伏动画
1,333 人浏览
2018-03-27 22:17:18
之前我们分享过很多基于HTML5 Canvas的水波动画，其中一款基于WebGL的水面水波荡漾特效相当绝妙。还有这款HTML5 Canvas 3D波浪翻滚动画也是非常不错。这次我们要带来的同样是一款基于HTML5 Canvas的波浪起伏动画，这次的是冰川波浪起伏动画，在Canvas上绘制冰川效果的形状，然后利用动画特性让这些冰川不停地起伏起来。
HTML Canvas火焰画笔动画
928 人浏览
2018-03-12 22:07:34
之前我们为大家分享过很多关于火焰的HTML5动画，像这个HTML5 Canvas火焰文字动画特效和这个HTML5动感的火焰燃烧动画特效就非常炫酷。这次我们要介绍的这款基于HTML5 Canvas火焰动画非常特别，它是带火焰动画的画笔，画笔笔刷在画布上绘制时，线条带有火焰动画，非常不错。
超逼真的HTML5 Canvas仿Windows画图工具
5,374 人浏览
2018-02-18 17:38:13
HTML5 Canvas 3D天体运行动画
2,325 人浏览
2018-02-03 11:30:35
HTML5 Canvas火焰文字动画特效
5,582 人浏览
2018-01-30 21:03:06
HTML5技术确实挺强大的，特别是Canvas画布更是让网页动画变得丰富多彩。今天我们分享的是一款基于HTML5 Canvas的火焰文字动画特效，它可以让任意文字上方冒出密集的火焰，就像这些文字在熊熊燃烧一样。与这款火焰动画类似的还有以前分享的HTML5 Canvas幻彩火焰文字特效。
接下来我们一起来看看如何实现这款炫酷的HTML5 Canvas火焰文字动画特效。
HTML代码
由于是基于Canvas的，所有的动画细节都在Canvas上绘制实现，因此html代码就非常简单，仅仅提供一个canvas元素即可。代码如下：
<canvas id="canvas" width="1024" height="600"></canvas>
别看这简单的一个元素，它结合CSS3和JavaScript可以实现非常复杂的动画。
CSS3代码
CSS代码也没有什么特别，仅仅是定义Canvas的背景颜色：
canvas {
background-color:#000000;
left: 0;
}
JavaScript代码
[......]