25个令人印象深刻的HTML5画布实验

221 阅读3分钟

最近,HTML5是一个值得讨论的话题。今天,我们收集了一些令人印象深刻的基于HTML5画布的实验,这些实验会让你说:"哇!"让我们来看看一些最新的、最前沿的例子。

警告。这些画布实验中的一些动画有可能引发光敏性癫痫患者的癫痫发作。建议观众谨慎观看。

在浏览这些实验之前,请看看我们的HTML5模板HTML5脚本,因为高质量的脚本或主题可能是你下一个项目的好选择。

Web developers on Envato StudioWeb developers on Envato StudioWeb developers on Envato Studio

现在开始实验!

  1. 轨道轨迹

美丽的漩涡彩虹粒子!

Orbital TrailsOrbital TrailsOrbital Trails

  1. 霓虹灯六边形图案

发光的灯光和粒子追踪着这个六边形的蜜蜂窝图案。

Neon Hexagon PatternsNeon Hexagon PatternsNeon Hexagon Patterns

  1. 长影

模拟箱子中的可移动光源。

Long ShadowLong ShadowLong Shadow

  1. 动画粒子背景

一个由节点和线条组成的宇宙网络,带有动画和聚光灯效果。

Animated Particle BackgroundAnimated Particle BackgroundAnimated Particle Background

  1. 点击响应

点击下面画布上的任何地方,可以看到一个可爱的圆圈爆炸。

  1. 心脏粒子

一团巨大的闪亮的落心云。

Heart ParticlesHeart ParticlesHeart Particles

7.五颜六色的带子

看着这些五颜六色的光带充满屏幕。

Colorful RibbonsColorful RibbonsColorful Ribbons

  1. 用文字作画

在画布上点击并不断拖动,用随机的文字作画。

  1. 旋转的螺旋

一个三维的螺旋,用线条渲染。你甚至可以用鼠标来旋转它!

Rotating SpiralRotating SpiralRotating Spiral

10.形状变化的文本

以全屏模式查看这个作品。输入文字,看着它出现在一个很酷的粒子效果中。

Shape Shifting TextShape Shifting TextShape Shifting Text

  1. 坠落的纸屑

一个漂亮的纸屑坠落效果。非常适合做为背景!

Falling ConfettiFalling ConfettiFalling Confetti

  1. 视差天际线

一个简约的侧滚动视差。这将是一个老式视频游戏的完美选择。

Parallax SkylineParallax SkylineParallax Skyline

  1. 环境背景

模糊的虚化点在周围旋转。在全页模式下查看这个,以获得最佳效果。

Ambient BackgroundAmbient BackgroundAmbient Background

14.闪亮的火花

只要将鼠标悬停在画布上,就能看到闪亮的火花到处飞溅。

  1. Anime.js 烟花

点击获得一个简单而又时尚的彩色烟花效果。

Anime.js FireworksAnime.js FireworksAnime.js Fireworks

  1. 机械草

看着 "草 "在你移动鼠标的地方生长。请务必以全屏方式观看这个作品,以看到其效果。

Mechanical GrassMechanical GrassMechanical Grass

  1. 互动式星星

当你移动鼠标时,看星星和星座出现在夜空中。

Interactive StarsInteractive StarsInteractive Stars

  1. 重力点

点击画布上的任何地方,看到所有的粒子都向该点引力。

  1. 粒子群

模拟的粒子在模拟的磁场中旋转。

Particle SwarmParticle SwarmParticle Swarm

  1. 人群模拟器

这个有趣的动画模拟了一群忙碌的人在行走。

Crowd SimulatorCrowd SimulatorCrowd Simulator

  1. 鸟儿的羽毛

一个美丽而宁静的模拟鸟群的动画。

Birds of a FeatherBirds of a FeatherBirds of a Feather

  1. 闪电

在屏幕上的任何地方连接两点,看电弧!

LightningLightningLightning

  1. 噪声抽象

一种独特的动画算法,用于生成时尚和多彩的抽象背景。

Noise AbstractionNoise AbstractionNoise Abstraction

  1. 液体灯

一个充满动画闪光的屏幕,让人联想到夜总会或音乐会。

Liquid LightsLiquid LightsLiquid Lights

  1. 彩虹蜘蛛

你能快速移动以使蜘蛛从网上掉下来吗?试一试吧。

那么你认为如何?对整洁的画布应用有了自己的想法?

好吧,现在你有更多的理由来创建HTML5应用程序:CodeCanyon有一个HTML5类别!浏览一下,看看有什么可用的,或者看看我们在ThemeForest的HTML5模板

这篇文章已被Monty Shokeen更新。Monty是一个全栈开发者,他也喜欢写教程,并喜欢学习新的JavaScript库。