我几乎半年没写博客了,哈哈先来个问候语。
可能有些人早就知道,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
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->varitems=[
["商品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
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->varitems=[
["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 更好。
分享到:
相关推荐
JavaScript用canvas元素实现2D和3D借鉴.pdf
F3.js:Fake 3D,实现在 canvas(Context2d) 上绘制 3D 场景
这个blog的例子 目前市面上H5游戏的图片资源,基本都是采用SpriteSheet打包成图集来使用的。这样可以减少网络加载的次数,从而提升性能...本文主要是讨论使用Canvas实现的2D序列帧动画的SpriteSheet的解析和动画播放。
JavaScript和Canvas实现雪花效果 const _rad2 = _radian * (60 * (i - 1) + _angle); _2d.moveTo(toPhysical(_left, _cx2), toPhysical(_top, _cy2)); _2d.lineTo(toPhysical(_left, _cx2 + _self.round(_size2 * ...
用canvas在不规则四边形上绘制图片
使用新版canvas-2d接口在微信小程序中生成二维码(外部二维码)的js包
要想将图片放入画布里,我们使用canvas元素的drawImage方法: // Converts image to canvas; returns new canvas element function convertImageToCanvas(image) { var canvas = document.createElement("canvas...
这是一个非常好的javascript物理引擎,用于html5+canvas游戏开发。这个版本是由开发flash游戏的Box2DFlashAS3 1.4.3.1物理引擎转换而来的。用这个引擎可以用html5的canvas开发出各种优秀的物理引擎类游戏,完全可以...
Canvas2DtoWebGL.js Canvas2DtoWebGL.js 将几乎所有方法从 HTML5 的常规 Canvas2D 上下文 (CanvasRenderingContext2D) 移植到 WebGL 调用,这允许在 2D Canvas 中混合 3D 或相反(创建 GUI、调试信息等),并且在...
用法webglToCanvas2d(gl, [canvas2d]) gl可以是使用 webglrenderingcontext 或 webglrenderingcontext 的画布。 canvas2d可以是画布或 CanvasRenderingContext2D。 返回的值将是一个使用 CanvasRenderingContext2D ...
* canvas操作历史回退及前进功能 * * 调用示例,执行某个操作之后,调用保存历史,这里的参数都是自定义的需要保存的历史数据 * self.selectCanvas.getContext("2d").saveHistory(points, copy_segments, copy_...
PureImage 是用于NodeJS的HTML Canvas 2d绘图API的纯JavaScript实现
利用canvas实现鼠标拖拽功能,当在元素上按下鼠标并移动时,元素跟着鼠标移动。 效果: 主要思路: 当鼠标按下时,用isPointInPath方法判断鼠标位置是否在元素上,如果在则鼠标移动时元素跟着移动;当鼠标抬起时,...
超快的2d渲染引擎,支持webgl和canvas渲染,让游戏制作变得超级容易
在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布;彩色图片加载完成后,使用 drawImage() 将图片加载到上下文,调用用于完成剩余绘制工作的 getColorData...
用Javascript和HTML5的2D Canvas上下文编写的3D线框游戏引擎 NPos3d的主要目标是提供一种快速简便的方法,以尽可能少的步骤创建交互式全屏3D线框应用,演示和玩具。 对于移动设备,它禁用视口缩放和滚动以以1到1像素...
HTMLCanvasElement //canvas elem对象 属性 height//高 width//宽 方法 getContext()//获取<canvas>相关的可...CanvasRenderingContext2D//等于 canvas.getContext(‘2d’)对象; 绘制矩形 canvas.clearRect()
该库使用JavaScript将Canvas转换为SVG。 换句话说,该库使您可以使用canvas api构建SVG文档。 为什么要使用它? 您有一个要作为SVG文件保留的画布图形。 您喜欢导出内容。 因为您不想将自定义文件格式转换为SVG...
我有几个主要目标(如下)鼓励我直接使用 typescript 而不是 javascript 开始这项工作。 这将使将除小修复之外的任何内容推回原始项目变得有点困难,但是在我达到我的第四个目标后,我将尝试与原始项目进行合并拉动...
Xy.js 是一个轻量级、高度可定制、基于 Canvas 的 JavaScript 2D 绘图库。 默认情况下,它会绘制一个风格的可爱点线图。 安装 运行以下命令: bower install xy 使用包 在你的 html 中包含dist/xy.js或dist/xy....