体验 ExplorerCanvas

最新推荐文章于 2024-08-09 07:20:17 发布

kc_ren

最新推荐文章于 2024-08-09 07:20:17 发布

阅读量188

点赞数

分类专栏： JS/Ajax/ExtJS 文章标签： JavaScript ASP.net IE ASP 脚本 ViewUI

JS/Ajax/ExtJS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

[url][/url]源码:http://excanvas.sourceforge.net/
封装:http://solutoire.com/flotr/

Canvas的愿意是帆布、画布的意思，这个标签在网页里就是一块可以自由创作的画布。可以使用JavaScript脚本操作Canvas，在上面绘图2d图形、3d图形（尚未支持）、图片处理等等，有点类似于GDI+这样的东西。

要正确的的网页上添加一个有用的Canvas标签，首先是在html里面创建它：

 <canvas id="test" width="300" height="300">this is a canvas test</canvas>

结束标签</canvas>是必须的，但是canvas里的文字不是必须的，这个是在canvas不被浏览器（比如IE）支持的时候显示的 fallback文本（也可以使任意其他的html代码）。接下来的操作就是用JavaScript代码来画画了。

 function draw()
 {
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 55, 50);
 }

第一布是从DOM里面得到canvas标签的引用，然后用getContext取得画布（类似GDI+里面的Graphics对象）。然后就是使用各种内置的方法进行绘制了，具体的方法可以去MDC上查看。

还可以看看这篇Canvas的Toturial:[url=https://developer.mozilla.org/en/Canvas_tutorial]https://developer.mozilla.org/en/Canvas_tutorial [/url]

原文:http://www.i5tt.com/blog/article.asp?id=203