标签归档：HTML5 Canvas

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

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

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

html5-canvas-ruler

在线演示源码下载

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

2,651 人浏览
发表回复
2020-02-04 16:04:38

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

html5-canvas-spiral

在线演示源码下载

HTML5 Canvas柳枝随风飘摇动画

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

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

html5-canvas-willow-swing

在线演示源码下载

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

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

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

html5-canvas-3d-circle-cube

在线演示源码下载

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

3,086 人浏览
发表回复
2019-04-14 11:14:09

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

html5-canvas-fireworks-celebrate

在线演示源码下载

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

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

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

threejs-canvas-3d-crystals

在线演示源码下载

HTML5 Canvas火焰跟随鼠标动画

2,997 人浏览
发表回复
2019-01-08 21:28:17

今天给大家分享一个效果很棒的HTML5 Canvas动画，它是一个火焰动画，这与我们之前分享的HTML Canvas火焰画笔动画类似，也是在Canvas上通过鼠标绘制而成。这个火焰动画会不停地跟随鼠标移动，如果你有一个游戏方面的宣传网页，那么这个动画可以用在鼠标移动上，应该是比较酷的。

html5-canvas-fire-mouse

在线演示源码下载

WebGL和Canvas可视化3D飞机模型结构 可360度预览

4,873 人浏览
发表回复
2018-12-30 13:52:19

今天给大家分享一个基于HTML5 Canavs和WebGL的3D模型结构，它是一个可360度预览的可视化3D飞机模型结构。我们可以通过鼠标拖拽自定义不同的角度对飞机模型进行观察，也可以点击按钮对飞机的具体部位进行详细观察。同时，我们也可以通过鼠标滚轮来缩放飞机的大小。

webgl-svg-3d-plain

在线演示源码下载

HTML5 Canvas 鼠标滑过3D动画背景

3,094 人浏览
发表回复
2018-12-25 13:22:28

在网页中我们经常会设置元素的背景，简单点的设置背景颜色，复杂的就设置背景图片。今天给大家分享一个将HTML5 canvas动画作为网页背景的例子，将canvas置于文本底部，canvas上绘制很多3D图形，当我们将鼠标滑过背景时，canvas上的这些3D图形将会翻转，效果很酷。

html5-canvas-3d-background

在线演示源码下载

HTML5 Canvas奇幻色彩Loading加载动画

2,743 人浏览
发表回复
2018-12-22 15:17:11

之前我们分享过很多基于CSS3的Loading加载动画，通过CSS3的高级特性，可以制作出形态各异的Loading加载动画组件。今天给大家带来的这款Loading加载动画是基于HTML5 Canvas的，在canvas画布上，我们动态绘制许多多边形，这些多边形伴随着颜色的随机变化和旋转，形成了奇幻色彩的视觉效果，是一款非常炫酷的HTML5 Loading动画特效。

html5-canvas-color-loading

在线演示源码下载