标题
[ExplorerCanvas/google/ie图片/缩略]JavaScript用canvas元素实现 2D 和 3D
clq
浏览(0) +
2009-05-18 10:59:19 发表
编辑
关键字:
http://www.cnblogs.com/chenou/articles/1351062.html
JavaScript用canvas元素实现 2D 和 3D
我几乎半年没写博客了，哈哈先来个问候语。
可能有些人早就知道，canvas 这个元素，这个是在 w3c HTML5.0 方案确定的元素， 可惜的是 IE 不支持这个元素，
火狐在很早的版本就支持了这个元素， 下面是一些浏览器支持 canvas 元素预览图。
Firefox Safari Opera ExplorerCanvas
2.0 ○ 2.0 ○ 9.2 ○ 0002 △
3.0 ○ 3.0 ○ 9.5 ○
ExplorerCanvas 是 Google 公司推出的一个专门让IE支持 canvas 元素的扩展类，即 excanvas.js，最新版本是 0002版本
为什么是三角呢，因为只提供部分属性方法支持。
---------------------------------------------------------------------------------------------------------
不可否认的javascript的先天缺点：
可怜的javascript由于微软，坚决反对,对js的扩展，而且IE占有 70%浏览器市场，使得js html 扩展举步维艰,因为微软主推 Silverlight，而
Adobe 公司放弃了svg 主推 Flash, 所以javascript 就是一个可怜儿，没人理。
但是javascript 是个神奇的语言，官方不给，民间自创，没有的方法，函数，可以通过原型构建新对象，所以像JQ，等这些扩展
控件百花齐放，javascript 没有图像库，绘图类，但是可以在其他浏览器用canvas 元素，在IE可以用vml 构造canvas 。
但是给我的感觉无论是，div实现图形还是 canvas 元素，给人的感觉都是太肤浅了，不支持的太多了比如最重要的文字、字体，旋转，变形。
和现有的flash 和层出不穷的 Silverlight没的比、不能比、没法比、千万不要比。
这里我有一句忠告就是用 javascript 绘图 = 自捏，还是老老实实的用 Silverlight 或 flash 。
--------------------------------------------------------------------------------------------------------
不可否认的javascript的先天优点：
代码量小，不用客户端安装任何插件，这对企业级的内网用户再合适不过了，有很多优秀的js库可以丰富js脚本。
这里要感谢一下 Google ，它推出的 excanvas.js 扩展类，虽然不是完美，功能太少，但是至少让
javascript 在多浏览器下，真正支持了绘图。
这里我推荐一个网站吧，因为国内几乎没有人用js绘图，所以相关的资料很少
但在日本就不一样了，他们把html5 称为次时代html语言。
http://www.html5.jp/ 小日本的网站，提供了非常详细的 html5 的参考资料，包括canvas 元素，而且方法，属性
都非常友好的告诉了你，那个浏览器支持和不支持。
canvas 元素还是很有用的，假如你想快速开发，给客户生成报表，图饼一类的，你可以不用借助于 Silverlight 或 flash 。
推荐几个小日本的控件(都是基于excanvas.js ）
这几个控件使用超级简单
柱形图设置
Code
var items = [
["商品A", 20, 58, 40, 14, 38, 20, 40],
["商品B", 10, 14, 58, 80, 70, 90, 20],
["商品C", 10, 14, 58, 80, 70, 90, 20],
["商品D", 10, 14, 58, 80, 70, 90, 20],
["商品E", 10, 14, 58, 80, 70, 90, 20]
];
7 个数字组，代表的是一周的7天，如果你有多个商品可以定义更多 商品F,商品G, 控件自动分配。
我测试过所有浏览器都支持，如果作为企业用户，你不想用 Flash 等可以用这个，修改维护都很方便
圆饼图设置
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国际象棋（可以鼠标旋转场景）
---------------------------------------------------------------------------
clq
利用excanvas对ie的客户端图片显示做出优化
很少时间来写网页编码了，现在现成的网页源码也有很多了，不过共享的源码如此之多，能够拿来合适而用的，倒真的不多，还是需要在模板、美工以及更重要的安全上面，精雕细琢。现在人们对网页的显示要求是越来越高了，今天就来展示一例针对ie的客户端图片显示做出优化.
在上传图片的时候，如果没有进行裁剪生成缩略图，或者生成的缩略图太粗糙，在页面缩放显示的时候就会带有锯齿，很影响美观。像safari、opera或者 google chrome还好，因为他们浏览器自身专门对页面图片显示做了优化工作；firefox不那么明显；ie下就非常影响浏览者感觉。
所以必须借助ria来专门对ie做些优化。我要介绍的是用excanvas。canvas和svg这些标签是用于在浏览器上绘图用的，除了ie之外其他浏览器都支持。因此我们必须借助第三方实现excanvas.js如：
clq
附件[暂不开放下载]
http://excanvas.sourceforge.net/
clq
ie私有属性优化图片失真(ie7+)
Submitted by chen0908 on 2009, March 5, 11:09 AM. CSS&JS学习
属性：-ms-interpolation-mode
值：
nearest-neighbor （低品质显示缩放的图片）；
bicubic (高品质显示图片)。
NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.
