JavaScript用canvas元素实现 2D 和 3D

   我几乎半年没写博客了,哈哈先来个问候语。javascript

 

   可能有些人早就知道,canvas 这个元素,这个是在 w3c HTML5.0 方案肯定的元素, 惋惜的是 IE 不支持这个元素,
火狐在很早的版本就支持了这个元素, 下面是一些浏览器支持 canvas 元素预览图。html

 

Firefox Safari Opera ExplorerCanvas
2.0 ○ 2.0 ○ 9.2 ○ 0002 △
3.0 ○ 3.0 ○ 9.5 ○  

 

ExplorerCanvas 是 Google 公司推出的一个专门让IE支持 canvas 元素的扩展类,即 excanvas.js,最新版本是 0002版本
为何是三角呢,由于只提供部分属性方法支持。
---------------------------------------------------------------------------------------------------------html5

不能否认的javascript的先天缺点:java


   可怜的javascript因为微软,坚定反对,对js的扩展,并且IE占有 70%浏览器市场,使得js html 扩展举步维艰,由于微软主推 Silverlight,而
Adobe 公司放弃了svg 主推 Flash, 因此javascript 就是一个可怜儿,没人理。canvas

可是javascript 是个神奇的语言,官方不给,民间自创,没有的方法,函数,能够经过原型构建新对象,因此像JQ,等这些扩展
控件百花齐放,javascript 没有图像库,绘图类,可是能够在其余浏览器用canvas 元素,在IE能够用vml 构造canvas 。浏览器

可是给个人感受不管是,div实现图形仍是 canvas 元素,给人的感受都是太肤浅了,不支持的太多了好比最重要的文字、字体,旋转,变形。
和现有的flash 和层出不穷的 Silverlight没的比、不能比、无法比、千万不要比。ide

  这里我有一句忠告就是用 javascript 绘图 = 自捏,仍是老老实实的用  Silverlight 或 flash 。
--------------------------------------------------------------------------------------------------------svg

不能否认的javascript的先天优势:函数

    代码量小,不用客户端安装任何插件,这对企业级的内网用户再合适不过了,有不少优秀的js库能够丰富js脚本。
这里要感谢一下 Google ,它推出的 excanvas.js 扩展类,虽然不是完美,功能太少,可是至少让
javascript 在多浏览器下,真正支持了绘图。post

这里我推荐一个网站吧,由于国内几乎没有人用js绘图,因此相关的资料不多
但在日本就不同了,他们把html5 称为次时代html语言。
http://www.html5.jp/     小日本的网站,提供了很是详细的 html5 的参考资料,包括canvas 元素,并且方法,属性
都很是友好的告诉了你,那个浏览器支持和不支持。

 

 canvas 元素仍是颇有用的,假如你想快速开发,给客户生成报表,图饼一类的,你能够不用借助于 Silverlight 或 flash 。
推荐几个小日本的控件(都是基于excanvas.js )

 

 

 

 

 

 

 

这几个控件使用超级简单

 柱形图设置

ContractedBlock.gif ExpandedBlockStart.gif Code
 var items = [
  [
"商品A"20584014382040],
  [
"商品B"10145880709020],
  [
"商品C"10145880709020],
  [
"商品D"10145880709020],
  [
"商品E"10145880709020]
 ];  


   7 个数字组,表明的是一周的7天,若是你有多个商品能够定义更多 商品F,商品G, 控件自动分配。
我测试过全部浏览器都支持,若是做为企业用户,你不想用 Flash 等能够用这个,修改维护都很方便

圆饼图设置

ContractedBlock.gif ExpandedBlockStart.gif Code
    var items = [
        [
"sample01"150],
        [
"sample02"100],
        [
"sample03"80],
        [
"sample04"60],
        [
"sample05"30],
        [
"sample06"20],
        [
"sample07"10],
        [
"sample08"10],
        [
"sample09"10],
        [
"sample10"10],
        [
"sample11"10],
        [
"sample12"10]
    ];

 

更简单你想增长一个比较就加一个 ["sample13",10] 一条记录,控件会自动计算百分比。 

js控件下载

-------------------------------------------------------------------------------------------------

骨灰级的应用 canvas 元素

    世界之大,无奇不有,人外有人,天外有天,真不是道听途说。

             丹麦人,javascript 狂热者,+ 天才。
   Jacob Seidelin 

   这是他 2D 做品 (最好用火狐,谷歌浏览器,IE会很慢)
    http://www.nihilogic.dk/labs/mario/mario_large_music.htm  
    只有14k代码的超级玛丽(做者开源)
    他用canvas 元素实现的,没有用任何图片,14K 哦,给我1400K 我也实现不了。
 
    最近他又在研究 3D

 

   下面是他用 js + canvas 作的3D小游戏 (最好用火狐,谷歌浏览器,IE会很慢)

   http://www.nihilogic.dk/labs/wolf/   3D射击     X 开门 C 子弹
   http://www.nihilogic.dk/labs/chess/  3D国际象棋(能够鼠标旋转场景)

---------------------------------------------------------------------------

   总结:对咱们来讲,认识下 canvas 元素,也能够学习下应用 excanvas.js
能够参考http://www.html5.jp/   ,不难,若是不用 flash,Silverlight,只是报表
应用仍是个不错的选择,固然若是你是js游戏发烧友能够更进一步的发掘,固然
建议,若是你不是 Jacob Seidelin 那种狂热型,仍是用 flash,Silverlight 更好。

 

 

转载于:https://www.cnblogs.com/libinqq/archive/2008/12/09/1350773.html