画布

---

实例

如何通过 画布 元素来显示一个红色的矩形：

<!文章类型 网页>
<网页>
<主体>
<画布 标识=“我的画“>您的浏览器不支持 画布 标签 </画布>
<脚本 类型=“文本/对象脚本“>
变量 画布=document.getelementbyid('我的画');
变量 画=画布.取上下文('2d');
画.填充样式='#ff0000';
画.填充矩形(0,0,80,100);
</脚本>
</主体>
</网页>

提示：由于本软件使用的是IE浏览器，而IE浏览器限制了网页运行脚本或ActiveX控件，所以预览时显示不出效果！在以后的版本更新会解决此问题，请使用用户电脑里的浏览器预览

---

 

浏览器支持

 

元素	Chrome	IE	Firefox	Safari	Opera
<画布>	4.0	9.0	2.0	3.1	9.0

 

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <画布> 标签。

 

注释：Internet Explorer 8 以及更早的版本不支持 <画布> 标签。

---

定义和用法

<画布> 标签定义图形，比如图表和其他图像。

<画布> 标签只是图形容器，您必须使用脚本来绘制图形。

注：<画布> 标签是 HTML 5 中的新标签。

---

属性

新 : HTML5 中的新属性。

属性	值	描述
高度	像素	设置 画布 的高度。
宽度	像素	设置 画布 的宽度。

---

全局属性

<画布> 标签支持 超文本（HTML ）中的全局属性。

---

事件属性

<画布> 标签支持 超文本（HTML ）中的事件属性。

---

如何使用 <画布> 标记绘图

大多数 画布 绘图 API 都没有定义在 <画布> 元素本身上，而是定义在通过画布的 取上下文() 方法获得的一个“绘图环境”对象上。

画布 API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 起始路径() 和 创建圆弧() 方法。

一旦定义了路径，其他的方法，如 填充()，都是对此路径操作。绘图环境的各种属性，比如 填充样式，说明了这些操作如何使用。

注释：画布  API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 <画布 > 图形，必须要么自己绘制它再用位图图像合并它，或者在 <画布 > 上方使用 层叠样式表 定位来覆盖 超文本（HTML ）文本。

---

---