阅读更多

15顶
0踩

Web前端

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

2012-03-16 18:18 by 正式编辑 nemohq 评论(7) 有63580人浏览
尽管,我们大多数人都听过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
好炫啊,不知道怎样才能用到项目中去

发表评论

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

相关推荐

  • 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 [" <<

  • C++11中"= delete;"的使用

    C++11中,对于deleted函数,编译器会对其禁用,从而避免某些非法的函数调用或者类型转换,从而提高代码的安全性。 对于 C++ 的类,如果程序员没有为其定义特殊成员函数,那么在需要用到某个特殊成员函数的时候,编译器会隐式的自动生成一个默认的特殊成员函数,比如默认的构造函数、析构函数、拷贝构造函数以及拷贝赋值运算符。 为了能够让程序员显式的禁用某个函数,C++11标准引入了一个新特性:de...

  • [转] 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设置环境(需...

  • 从C++到C#

    看完书要做题实践 懂得如何取舍,编程能力是一种解决问题的能力。如果问题没能被很好地解决,知道再多也没用。 编程不是解各种脑筋急转弯的问题 计算机科学有两类根本问题。一类是理论:算法,数据结构,复杂度,机器学习,模式识别等。理论走的是深度,是在追问在给定的计算能力约束下如何把一个问题解决得更快更好。 一类是系统:操作系统,网络系统,分布式系统,存储系统,游戏引擎,等等等等。系统走的是广度,是

  • C++ new一次,delete多次探讨

    《问题》危险的代码:    int* p=new int(1);    delete p;    delete p;   探讨一:    连续两次对同一个指针delete ,会造成严重的错误。编译器会检测出这样的错误吗?或许一些编译器会的,但别太过指望编译器。   探讨二:    第一次delete后,p自动为空(NULL)了吗?不是的。  

  • C#和C++释放内存的区别

    1.C# 是如何处理的? 举例 定义一个变量int temp 在释放的时候 令temp=null, 这个时候只是释放栈里的内存; C#堆内存的释放是由垃圾回收机制处理的,也就是GarbageCollection处理的。   2.C++是如何处理的? C++中是可以手动释放堆里的内存。 通过 Delete temp; 释放掉该变量在堆中的内存。 Temp=null 释放栈里的内

  • 记一道错题——C++中delete和delete[]的区别

    今天刷到一道题目结果出乎意料的ggl所以记录一下 以下涉及到内存管理的代码段中,有错误的是: int *a=new int(12); //..... free(a); int *ip=static_cast&amp;lt;int*&amp;gt;(malloc(sizeof(int))); *ip=10; //..... delete ip; double *a=new double[1]; //.....

  • 重载自己的 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

  • C++ new delete(一)

    在C#、Java這種managed語言,因為有garbage collection,所以完全不用考慮free()或delete,但在C/C++,有時候要delete的,有時又不用,到底哪些改delete?哪些不用delete呢?簡單的說,若要使用用到heap,就要手動去delete或free()!! 那什麼時候會用到heap呢?當你打算使用dynamic allocation時!!更白話一點,就...

Global site tag (gtag.js) - Google Analytics