阅读更多

15顶
0踩

Web前端

翻译新闻 25 个基于 HTML5 Canvas 的超炫示例

2012-03-16 18:18 by 正式编辑 nemohq 评论(7) 有63443人浏览
尽管,我们大多数人都听过HTML 5,但我们当中许多人实际上并没有意识到它可以做什么。然而,最近有一个HTML 5独具特色的标签Canvas慢慢的流行起来,市场也开始需要它。据说,HTML5 Canvas 是一个使用脚本来绘制图形的元素,通常这意味着要通过JavaScript来实现。简单来说,HTML5 Canvas类似于Flash 程序,只不过是通过JavaScript 绘图,然后这些绘制的图形以代码的形式来定义。

虽然通过一些介绍HTML5 Canvas的文章中我们已经碰到过一些关于HTML5 Canvas的令人称奇的例子,但事实上,由于一些设计师就这一功能做出如此好的应用,以至于我们决定收集整理这些令人惊奇的例子,并且和我们的读者来分享。

在互联网上,HTML5 Canvas有清晰的定义。Dev.Opera这样定义HTML5 Canvas:为你提供一种既简单又有效的用JavaScript 来绘图的方法。对于每一个Canvas元素,你可以发出JavaScript 指令创建一个‘context’对象(想想网页的草图)来绘制任何你想要的图形。教程解释说,想要创建一个Canvas元素,就必须规定这个Canvas元素的独一无二的ID,宽度和高度,因为Canvas元素本身是没有绘图能力的,所有的绘制工作必须在 JavaScript 内部完成,之后,脚本会通过之前创建的ID来找到这个元素。

在下面众多的例子中,人们可能会意识到在游戏中HTML5 Canvas被大量采用;然后我们筛选了一些具有启发性的例子。在游戏中可以使用这项技术,这是是因为通过JavaScript 绘制的图形是以代码的形式定义的,并且代码很容易被压缩。因此,可以让图形载入速度更快,并减轻浏览器的压力,而且允许游戏以更加平稳的过度方式运行,以及在不同的浏览器中加载的更快。

我们希望这些简短的说明能够有助于你的理解,并回答你的一些有关HTML5 Canvas 的问题。同时,我们也希望你会喜欢下面这些关于HTML5 Canvas的有用的例子。

1、鱼缸

观赏鱼在鱼缸中游泳。


2、3D地球

观看地球围绕其轴线旋转。


3、互动拍立得

请享受这种互动宝丽来格式的照相馆视图。


4、Canvas Cycle: True 8-bit Color Cycling with HTML5

最强大的HTML 5展示例子,甚至可以有不同的天气效果。


5、魔法师:童话般的援救

体验这个游戏的乐趣,并试图营救被困在闪闪发光的气泡中的仙女。


6、Pirates Love Daisies

一个塔防游戏,用户以戴维·琼斯的身份去偷对手的雏菊。


7、PaJama

基于鱼养殖遗传学基本规律的模拟游戏。



8、Breakdom

一个经典的通过单选复选组成的“打砖块”游戏。



9、Canvas骑士

一个令人上瘾的游戏,可以用键盘玩的“极限摩托”。


10、轨迹

这是粒子产生平滑轨迹的图案。



11、波浪

点击鼠标,可带起舒缓的波浪和泡沫。


12、Cloth Experiments

一款模拟游戏,布呈W型。



13、球池

拖动一个球,在浏览器中体验重力感应。



14、吹起来的HTML 5

点击视频,实现破碎视频效果。


15、三维景观

使用Canvas元素产生一个三维景观。


16、滑动

使用Canvas元素产生了这一 coverflow效果。


17、折纸

一个很优秀的Canvas例子,满眼都是色彩斑斓的折纸。


18、WebGl迷宫

这个游戏的目的是要通过迷宫。


19、Tiler 3D

以一种奇妙的方式来进行图片切换。


20、粒子系统

移动鼠标,并选择下面的选项。


21、分子旋转

这个例子为那些对科学和分子可视化感兴趣的人准备的。


22、HTML5万花筒实验

一个奇妙的万花筒效果的展示。


23、Mesmerizer

当有鼠标移动和键盘输入时,界面会发生变化。


24、花的力量

体验用盛开的花朵来画图的效果。


25、9Elements Particle Play

一个动态显示音频和颜色的很好的例子。



英文原文:25 Useful Examples and Implementation of HTML5 Canvas
  • 大小: 28.6 KB
  • 大小: 35.4 KB
  • 大小: 59.4 KB
  • 大小: 56.7 KB
  • 大小: 45.9 KB
  • 大小: 78.4 KB
  • 大小: 47.2 KB
  • 大小: 25.1 KB
  • 大小: 42.6 KB
  • 大小: 15.6 KB
  • 大小: 17 KB
  • 大小: 61 KB
  • 大小: 59.7 KB
  • 大小: 43.1 KB
  • 大小: 19.6 KB
  • 大小: 45.3 KB
  • 大小: 30.5 KB
  • 大小: 19.1 KB
  • 大小: 57.2 KB
  • 大小: 48 KB
  • 大小: 44.6 KB
  • 大小: 23.7 KB
  • 大小: 14 KB
  • 大小: 27.3 KB
  • 大小: 15.1 KB
15
0
评论 共 7 条 请登录后发表评论
6 楼 Alsmile 2019-09-29 09:59
推荐一个基于typescript + canvas的好用开源绘图工具和绘图引擎。易集成到自己的前端项目、还可以方便自定义图形库,支持微服务架构图、流程图、时序图、活动图、类图等:
https://juejin.im/post/5d6c88726fb9a06b0e54ab35
5 楼 mdpmw 2013-08-16 16:19
Canvas 好强大,大明星
4 楼 forcer521 2012-03-19 11:52
  非常好的应用示例啊
3 楼 nemohq 2012-03-19 09:03
呵呵。我接受您的道歉!我们都是职业开发者。我也会努力发布更专业的业界新闻,服务大家的。感谢大家对ITeye的关注和支持。谢谢大家! 
2 楼 counters15 2012-03-18 15:02
还在做ie7兼容性的飘过。。。
1 楼 yiyiboy2010 2012-03-17 02:50
好炫啊,不知道怎样才能用到项目中去

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • android端基于深度学习的车牌识别

    android端,基于openCV与深度学习,实现快速准确的车牌识别。平均识别耗时350ms左右,采集100样本识别准确率达到95%。识别过程:1、使用openCV确定车牌左右、上下区域;2、车牌倾斜判断与校正;3、滑动切割字符;4、深度学习对每个字符进行识别

  • C++ 内存分配操作符new和delete详解

    重载new和delete 首先借用C++ Primer 5e的一个例子: string *sp = new string("a value"); string *arr = new string[10]; 这其实进行了以下三步操作: new表达式调用一个名为operatornew(或者operatornew[])的标准函数,分配一块足够大的,原始的,未命...

  • C++报错:warning: ‘delete[]‘ applied to a pointer that was allocated with ‘new‘; did you mean ‘delete‘?

    warning: 'delete' applied to a pointer that was allocated with 'new[]'; did you mean 'delete[]'?

  • C++ delete错误

    1. 指针通过 new 或 new[] ,向系统“申请”得到一段内存空间,这段内存空间必须在不需要将它释放了。 int* p = new int[100];  int girl[100];      p = girl;      delete [] p;    灾难在 delete [] p 时发生。我们原意是要释放p最初通过new int[100]而得到的内存空间,但事

  • C++ 学习笔记

    auto、string、new/delete 和 malloc/free、内联函数、引用、函数重载、隐藏、覆盖、重写、static、const/constexpr 和 #define、构造函数和析构函数、继承和多态、Lambda 表达式、智能指针和 RAII 机制、STL 容器、RTTI 和类型转换运算符、this、模板、友元、运算符重载

  • Mismatching scalar and vector new and delete

    In a previous entry I alluded to the problems thatcan occur if you mismatch scalar "new" with vector "delete[]"or vice versa. There is a nice description of C++ memory managementinC++ Gotchas: Avoid

  • 【C++】动态内存分配详解(new/new[]和delete/delete[])

    一、为什么需要动态内存分配? 在C++程序中,所有内存需求都是在程序执行之前通过定义所需的变量来确定的。 但是可能存在程序的内存需求只能在运行时确定的情况。 例如,当需要的内存取决于用户输入。 在这些情况下,程序需要动态分配内存,C ++语言将运算符new和delete合成在一起。 (1)特点 1.C++中通过new关键字进行动态内存申请 2.C++中的动态内存分配是基于类型进行的 ...

  • What happened if i delete a pointer which was not allocated dynamically?

    new/delete new[]/delete[]实在是老生常谈了,成对的出现就可以了:#include <iostream> // std::cout #include <new> // ::operator newstruct MyClass { int data[100]; MyClass() {std::cout << "constructed [" <<

  • 使用#pragma阻止一些warnings

    转自:http://www.cnblogs.com/csutanyu/p/4451093.html 使用#pragma阻止一些warnings 这篇博客的内容都是记的网上的。是流水账。只是记录下来以便日后之有,避免每次重新google。 #pragma除了可以用来把不同功能的代码进行分隔组织外还可以用来disable一些warnings。这在引入一些第三方带有warnings的库的时

  • 检测由new/delete使用不当引起的内存泄露

    检测由new/delete使用不当引起的内存泄露

  • 重载自己的 new / delete

    My Rant on C++s operator newby David Mazières Abstract These are some notes I have on C++s operator new. Basically, I find its syntax downright hateful, and really wish the language had d

  • New[]和delete []为哈要匹配

    New一个数组的时候他得地址大小是k*n+4的大小 k是几个 n是大小 4个字节是为了存储数组长度这样在删除的时候可以知道要析构delete []多少次析构函数释放多少内存 New和delete[]结合 int main(int argc, char *argv[]) { inner *p = new inner[2]; delete p; return 0; 这块很容易崩溃 因为我们使用了del...

  • iOS消除对应的警告!

    在iOS开发过程中, 我们可能会碰到一些系统方法弃用, weak、循环引用、不能执行之类的警告。 有代码洁癖的孩子们很想消除他们, 今天就让我们来一次Fuck 警告!!首先学会基本的语句 #pragma clang diagnostic push #pragma clang diagnostic ignored "-Wdeprecated-declarations" 这里写出现警告的代码#prag

  • [转] Valgrind使用

    调不尽的内存泄漏,用不完的Valgrind Valgrind 安装 1. 到www.valgrind.org下载最新版valgrind-3.2.3.tar.bz2 2. 解压安装包:tar –jxvf valgrind-3.2.3.tar.bz2 3. 解压后生成目录valgrind-3.2.3 4. cd valgrind-3.2.3 5. 运行./autogen.sh设置环境(需...

Global site tag (gtag.js) - Google Analytics