标签归档:HTML5 Canvas

HTML5 Canvas 五彩发光喷泉动画

前几天我们为大家分享过一款很酷的HTML5 Canvas火焰动画,一起见证了Canvas的强大。这次要分享的这款动画也是基于Canvas实现的,它是一个五彩的发光喷泉动画特效。页面上一共有4个喷泉柱子,并且每个柱子都有在水面上的倒影,喷射出五彩斑斓的喷泉,同喷泉的颜色会随机变化,非常炫酷。

html5-canvas-fountain

在线演示源码下载

HTML5 Canvas雾状火焰动画

我们可以在Canvas上绘制很多图形,也可以利用HTML技术在Canvas上制作一些复杂的动画,之前我们也分享过一些基于HTML5 Canvas的火焰动画,例如这个HTML5 Canvas幻彩火焰文字特效和更早以前分享的HTML5 Canvas火焰燃烧动画。这次我们给大家带来另外一款基于HTML5 Canvas的火焰动画,你可以在Canvas画板上用鼠标点击拖动,便会形成雾状的火焰效果,火焰就像雾霾一样逐渐扩散开来。

html5-canvas-fog-fire

在线演示源码下载

HTML5 Canvas弹性文字动画

HTML5中,Canvas上不仅可以绘制图形和动画,还可以实现各种炫酷的文字动画特效。之前分享过一篇文章7款超华丽的HTML5 Canvas文字动画特效,其中就有不少令人惊叹的HTML5文字特效。这次我们给大家分享的也是一款基于HTML5 Canvas的文字动画,这款文字动画是将文字悬挂在富有弹性的细线上,用鼠标拖动文字即可让其在各个方向弹动。

html5-canvas-elasticity-text

在线演示源码下载

基于Echarts的HTML5 Canvas中国地图

之前我们分享过几个基于HTML5和SVG的地图应用,例如这款HTML5世界地图利用了SVG的path特性,又比如这款jQuery矢量SVG地图插件JVectorMap同样通过SVG和jQuery实现。这次我们要分享一款基于Echarts的中国地图,底层技术是HTML5 Canvas技术,正是利用了Canvas中绘制图形的便利性,这款中国地图应用可以为每一个省添加描述信息。

echarts-html5-canvas-map

在线演示源码下载

HTML5 Canvas带边框的粒子动画进度条

还记得很早以前,我们分享过一款基于HTML5 Canvas的粒子动画进度条,非常富有创意。今天我们要带来的同样是一款基于HTML Canvas的粒子进度条动画,不同的是这款进度条相对是扁平样式的,进度部分带有细边框。

html5-canvas-border-pixel-progressbar

在线演示源码下载

HTML5 Canvas冰川波浪起伏动画

之前我们分享过很多基于HTML5 Canvas的水波动画,其中一款基于WebGL的水面水波荡漾特效相当绝妙。还有这款HTML5 Canvas 3D波浪翻滚动画也是非常不错。这次我们要带来的同样是一款基于HTML5 Canvas的波浪起伏动画,这次的是冰川波浪起伏动画,在Canvas上绘制冰川效果的形状,然后利用动画特性让这些冰川不停地起伏起来。

html5-canvas-ice-wave

在线演示源码下载

HTML Canvas火焰画笔动画

之前我们为大家分享过很多关于火焰的HTML5动画,像这个HTML5 Canvas火焰文字动画特效和这个HTML5动感的火焰燃烧动画特效就非常炫酷。这次我们要介绍的这款基于HTML5 Canvas火焰动画非常特别,它是带火焰动画的画笔,画笔笔刷在画布上绘制时,线条带有火焰动画,非常不错。

html5-canvas-draw-fire

在线演示源码下载

超逼真的HTML5 Canvas仿Windows画图工具

画图工具一直是Windows操作系统中一直延续下来的实用工具之一,随着系统版本的升级,画图工具的功能和界面也发生了巨大的变化。今天我们要介绍的是一款利用HTML5 Canvas实现的仿Windows早期版本的画图工具,里面的功能几乎和windows中的画图工具功能一样,非常逼真,甚至连快捷键都支持。不得不说,HTML5技术中的Canvas画板特性的确非常实用,它就像一块画布,你可以在上面绘制任意图形,甚至是动画特效。

html5-canvas-windows-draw

在线演示源码下载

HTML5 Canvas 3D天体运行动画

今天我们要给大家分享一款基于HTML5 Canvas的3D星球天体运行动画,这里我们在Canvas画布上绘制了一颗较大的星球,然后在大星球周围有一圈很小的陨石区域,这些陨石会围绕着星球不停地旋转,而且配合黑色的背景后带有很强烈的3D视觉效果。

html5-canvas-3d-planet

在线演示源码下载

HTML5 Canvas火焰文字动画特效

HTML5技术确实挺强大的,特别是Canvas画布更是让网页动画变得丰富多彩。今天我们分享的是一款基于HTML5 Canvas的火焰文字动画特效,它可以让任意文字上方冒出密集的火焰,就像这些文字在熊熊燃烧一样。与这款火焰动画类似的还有以前分享的HTML5 Canvas幻彩火焰文字特效

html5-canvas-fire-text-animation

在线演示源码下载

接下来我们一起来看看如何实现这款炫酷的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代码

[......]

阅读全文>>