标签归档:HTML5 Canvas

HTML5 Canvas金色漩涡动画

HTML5动画技术在Canvas上得到了充分的发挥,我们之前也分享过很多基于HTML5 Canvas的动画特效,比如最近分享的HTML5 Canvas雾状火焰动画。这次我们给大家带来另外一款超炫酷的HTML5 Canvas金色漩涡动画,漩涡中不停旋转的水波非常的逼真。

html5-canvas-golden-swirl

在线演示源码下载

HTML5 Canvas和SVG实现的五彩万花筒动画

Canvas的优势在于允许你在画板上任意绘制图形,SVG的优势在于可以很方便的在网页上绘制各种形状的路径。今天分享给大家的就是一款基于HTML5 Canvas和SVG的五彩万花筒动画,五彩斑斓的彩色路径将会不停的变换形状和颜色,效果非常炫酷。

html5-svg-color-cylinder

在线演示源码下载

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

在线演示源码下载