36个炫丽的html5 canvas展示

html5最新的canvas技术,提供通过JavaScript绘制图形的API,它是基于画布(canvas)的2d来实现绘画的,以往只有flash能够实现的效果,在下面的这些示例中,你将会看到炫丽的canvas展示动画,甚至超越它达到另外一个高度。

今天特地为大家收集来36个各种网站上面的,不同效果的html5 canvas应用程序。让大家对学习html5增加一份新的动力。

1、The Tumbler

001

这是一个使用SVG,WebAudio、Box2dWeb、CoffeeScript等技术实现的html5 canvas不倒翁效果,正如你所看到的一样,此示例会不断旋转,但里面的物体总朝着一定的方向。

 

2、jscloth

002

这块帆布看上去没什么特别的,但它可以点击和拉动,你可以试试它有什么样的效果。

 

3、Interactive Typography Effects

003

交互式排版效果,将字体排成一定形状,还实现了互动特效,一共有4个示例,它是怎么做到的呢。

 

4、Click video to blow it up!

004

点击这个视频可以击碎它!相信大家很早就见过这个特效,它的确很早就出现了,是基于html5技术和WebKit浏览器实现的。

 

5、3d-grapher

005

在方程组可以使用预定义的功能:sin, cos, tan, exp, pow, sqrt, abs, ln, asin, acos, atan and constant pi.单击并拖动旋转。鼠标滚动放大(缩小)。

 

6、remixing-reality

006

新的视觉维度都在你的掌握之中!WebGL允许你添加实时渲染3D模型,分层图像、视觉照片和视频效果,给视觉媒体新的深度。

 

7、ghostwriter-art-studio

007

这是一块画板,使用了html5,css3、canvas、本地存储等技术,你还可以下载它的源代码,看看是怎么实现的。

 

8、zen-photon-garden

008

带粒子效果的通常都非常炫丽,试试拉动这个光子花园,你能看到它的光子效果。

 

9、html5logo

009

一个html5的logo,可以使用鼠标让它左右旋转,效果挺不错的,它能让你感受到html5。

 

10、CanvasMark

010

这是2013年的canvasmark HTML5画布2D渲染和JavaScript基准的1.1版物理引擎,它使用的游戏包括小行星和arena5,你也可以下载它的源代码

 

11、cloth

011

一张网,看上去挺不错,有弹性和吸力,你可以拉动它,看看自己能否将它撕开呢。

 

12、water-effect-canvas

012

这个示例可以用鼠标产生波纹,这是怎么实现的呢?难道它就是像水一样的canvas效果。

 

13、CANVAS MINIMAL PARTICLE ANIMATION

013

canvas的最小粒子动画演示,你可以通过输入框输入文字,看它的效果如何。

 

14、canvas-nebula

014

这是一个简单使用HTML5 canvas元素的星云效果演示。通过分层和三幅图像产生的效果,从一个较大的位图源,那淡入淡出的同时增加规模.有一个面积较大的位图,选择随机纹理偏移和非重复性的滤镜。

 

15、spacegoo

015

一个立体的三维空间,它能够旋转和点击,这种交互方式是以canvas元素+位图实现的,看上去不一般哦。

 

16、bomomo

016

类似的一个画板程序,但它只能实现特定的图像,你可以使用它提供的工具,在画板上发挥你的想像力:),记得,它是canvas实现的。

 

17、Conductor

017

这些美妙的线条,不断前进和交错,同时也会90度转弯,碰到时会展示出弹性,线条和背景的颜色会不断变化,但它们都有自己的生命周期,时间到了就会消失在幕布上,看看它们在画什么。

 

18、Wave

018

是不是看上去就像大海的海面一样?这些美妙的波浪和汽泡,你可以用鼠标上下搅动它。

 

19、Blob

019

两个小水滴,使用鼠标可以将它们融合在一起。也能双击拆分它们,摇动可以让它们反弹。使用键盘上的上/下箭头来改变水滴的大小,左/右箭头来改变皮肤间。

 

20、Liquid Particles

020

粒子效果哇!它能随着鼠标不断散发开来并且相互撞击,当鼠停止时,它也就变成一点火花。

 

21、Sinuous

021

这是一个小的canvas游戏,点击Start开始。它的规则:1。避免红点。2。触摸绿色点刀枪不入。3。使用不易破坏的红点。4。很多运动成绩加分。5。活着。

 

22、Magnetic

022

这是引力的canvas物理引擎,一些粒子尘埃会围绕几个较大的球体,这些球体能够使用鼠标拖动和变化。

 

23、Trail

023

这些美妙的线条会随着鼠标不断的旋转着,但当你拖动鼠标时,它们亦会跟随,由此可以产生出像彗星一样美丽的轨迹。

 

24、particles

024

三种颜色红、黑、黄的粒子效果,在不断的变化着,鼠标移上去会变大哦。

 

25、box2d2

025

基于box2d的效果,可以点击鼠标来弹开它们。

 

26、Canvas in 3D

026

canvas实现的3d效果,里面的镜面可以点击,看看它们藏着的图像是什么。

 

27、piekna_mat

027

不断产生规律的线条,最终产生一个圆的多边形,但它们是由像素组成的。

 

28、ball-pool

028

最大的一个上面有一段介绍文字,点击可以产生许多小球形状,试试连续点击,可以将整个浏览器塞满呀:)

 

29、Interactive HTML5 canvas animation

029

点击画布添加更多的斑点,彩色按钮设置斑点颜色,RND组随机颜色。这部作品兼容Firefox,Safari,Chrome,iPhone,和IE9浏览器。

 

30、js-fireworks

030

很好的粒子效果,一幅夜景的天空看上去像烟花打出的字体。上面的框你可以随意输入英文字体。

 

31、sketch

031

它叫gartic,是一个画板工具,你能用它提供的工具,发挥出你的想像力。

 

32、ping-pong-game

032

HTML5 Canvas游戏并不难,一旦你学会了逻辑,你是游戏的创造者。在本教程中,您将学习如何创建一个画布,不那么标准的乒乓球比赛。首先,让我们看看在主要概念和一些基本的逻辑背后的博弈。
1、应该是有两个球拍和球。2、球反弹回来(改变方向)击中墙壁和桨后。3、当球碰到天花板或地板上,游戏应该结束了。4、桨应该移动用户控制,通过鼠标或键盘。

 

33、image nodes

033

在交互节点建立的图像数据。用鼠标玩,你可以点击它。

 

34、barcampclt physics

034

简单的游戏开发物理学,它使用了牛顿定律,位置、速度、加速度、碰撞(弹性)、碰撞(主要是弹性)、欧几里得、旋转(已知角)、旋转(未知角)、旋转(三角形覆盖)、旋转+颗粒、复数、帆布测试、skookball原型等数学概念。

 

35、make-a-particle

035

这个画面是不是很生动呢?这些光束真的很好看,学会在HTML5 canvas和JavaScript做一个简单的粒子系统。本示例的灵感来自视频教程seb_ly。颗粒基本上都是简单的圆的径向梯度和速度的随机性质,大小和颜色。

 

36、cool-ascii-animation

036

图像可以通过将像素灰度和代表他们使用文本字符转换成ASCII码。密集的字符用于暗像素,稀疏特征用于光像素。
在本课中,HTML5 canvas是用来读取精灵的像素数据并将其转换成灰度。一个字符映射然后从像素的灰度值和注入DOM组成ASCII艺术。
最后,JavaScript是用来移动精灵的ASCII版本的步骤来创建动画。

 

 

原文:flash老鼠