标签归档：HTML5 Canvas

HTML5 Canvas 照片撕裂切换动画

这是一个很有意思的HTML5 Canvas图片切换动画，我们可以用鼠标或者手指在屏幕上滑动，将照片撕成两半，然后再切换成另外一张新的照片。这个特效不足的地方在于，所有照片的撕裂裂纹都是一样的，这可能会显得不是那么逼真。如果你有一个相册应用，个人认为可以将这个效果添加到你的相册照片删除功能上，看到哪张照片不爽，直接将它撕成两半，是不是很过瘾。（注：该动画本地无法运行，需要上传到服务器才可以使用）

html5-canvas-photo-tear

在线演示源码下载

HTML5 Canvas人群流动模拟动画

这是一个基于HTML5 Canvas的动画特效，这个动画主要是模拟了大街上人群流动、熙熙攘攘的景象。首先每一个人物都是在Canvas上绘制而成，大街上男女老少都有，十分逼真。同时，为了让动画更加真实，每个人物的行走速度、行走动作都有一定的差异，这让整个HTML5动画显得更为真实，我们也不得不叹服，Canvas真是一个好东西。

html5-canvas-crowd

在线演示源码下载

HTML5 3D 陨石火球动画

今天要分享的又是一个基于HTML5 Canvas的炫酷动画，这是一个3D的陨石火球动画。从外观上看，这就像一颗正在坠落的陨石火球，还拖着一条长长的火焰尾巴。同时，我们可以通过拖拽鼠标从不同的视角来看这颗火球，并且可以通过鼠标滚轮来放大缩小火球，这便让人产生了不错的3D视觉效果。另外，右上角可以展开一个控制面板，允许你设置火球的颜色、大小、阴影等参数。

html5-canvas-toon-fireball

在线演示源码下载

基于Three.js的图片撕碎切换动画

这次要给大家带来一个特别炫酷的HTML5 Canvas图片切换动画，它是基于three.js动画库实现的，主要动画是图片以撕碎的特效进行切换，相当震撼。另外，在图片切换过程中，你也可以通过鼠标拖动来查看切换时的具体细节效果。如果将它制作成一个效果非常独特而华丽的相册或者焦点图插件，相信会很不错的。

three-js-image-animation

在线演示源码下载

HTML5 Canvas 刻度尺插件 可定制多种主题样式

7,414 人浏览
发表回复
2020-02-08 11:14:38

今天给大家带来一款基于HTML5 Canvas的刻度尺动画，我们可以通过在屏幕上滑动刻度尺来改变刻度值，你也可以通过设置初始值来决定是否在移动刻度尺时显示当前刻度值。这款插件还有一个特点是可以通过配置来设置刻度尺的多种主题样式。

html5-canvas-ruler

在线演示源码下载

HTML5 Canvas粒子螺旋线条3D动画

4,655 人浏览
发表回复
2020-02-04 16:04:38

今天给大家带来一款效果很酷的HTML5 Canvas动画，它由几个基本动画组成，一个是粒子动画，另一个是螺旋动画。首先是在canvas画板上将像素粒子组合成一个螺旋形线条，然后用JavaScript让粒子运动起来，在视觉上形成螺旋线条波动的动画特效。

html5-canvas-spiral

在线演示源码下载

HTML5 Canvas柳枝随风飘摇动画

2,665 人浏览
发表回复
2019-11-30 18:50:19

这是一款用HTML5 Canvas模拟的柳树随风飘摇的动画特效，首先柳枝和柳叶的模拟通过CSS实现，虽然不是很逼真，但是这并不是这个动画的重点。重点在于我们将鼠标滑过柳枝时，就像微风拂过一般，将柳枝和柳叶飘摇起来，这中间大家可以学习如何用HTML5技术在Canvas画板上实现动画。

html5-canvas-willow-swing

在线演示源码下载

HTML5 Canvas 3D环形方块翻转动画

3,870 人浏览
发表回复
2019-07-16 22:13:35

之前我们有给大家分享过一系列的HTML5 3D立方体动画，有很多效果都还不错的，比如这个HTML5/CSS3 3D魔方动画就很厉害，这应该是方块效果中最复杂的了。今天给大家带来的这款方块动画是基于HTML5 Canvas的，它的特点是许多个方块围成一个环形，每个方块不停地旋转，同时你也可以拖拽鼠标来看环形方块的不同视角。

html5-canvas-3d-circle-cube

在线演示源码下载

HTML5 Canvas烟花绽放庆祝活动场景

4,698 人浏览
发表回复
2019-04-14 11:14:09

前段时间，我们分享过几个基于HTML5 Canvas的烟花动画，例如这个2D平面的烟花动画，也是基于HTML5 Canvas的；同样的另外一个基于3D带音效的烟花燃放动画效果也非常炫酷。这次我们分享的另外一款基于HTML5 Canvas的烟花绽放动画的特点是，除了可以播放烟花动画，而且还可以用粒子动画的方式显示文本，例如公司名字，这样更是渲染了庆祝的氛围。

html5-canvas-fireworks-celebrate

在线演示源码下载

基于Three.js和HTML5 Canvas的3D水晶球体

5,816 人浏览
发表回复
2019-01-21 15:09:19

今天给大家分享一个很酷的HTML5 Canvas 3D动画，它同样是一个基于Three.js制作的动画特效。在Canvas上有一个用许多长度各异的水晶柱形组成的球体，我们还可以用鼠标拖拽球体来从不同角度观察球面，还可以用鼠标滚轮来缩放球面。还有一个特性就是，双击球面可以改变水晶面的颜色，同时水晶面上会随着旋转的角度出现亮光，更加凸显出其3D立体的视觉效果。

threejs-canvas-3d-crystals

在线演示源码下载