【IT168技术】作为HTML5 中新引入的重要标签之一，Canvas元素使得 Web 开发人员可以直接使用 JavaScript 脚本在 Web 页面进行绘图。这样，作为第三方插件的Flash，就彻底的Out了。本文的目标是指导读者如何使用Canvas标签以及相应的JavaScript API，实现基于Web的绘图功能。

　　大家都知道，乔布斯从来都与Flash摆出一副水火不相容的态势。这就是为什么从iPad到iPhone，苹果移动设备就从未支持过Flash。对于苹果来说，除了拿Flash的性能说事儿以外，恐怕也有自家技术排挤它人的想法作祟吧?毕竟自家有很多HTML5的法宝嘛!Canvas技术就是其中之一。

　　实际上，Canvas首次由苹果公司的 Webkit 框架引入实现，并成功运用在 Safari 浏览器中。目前，Canvas 已成为 HTML5 规范中的事实性标准，并先后被Firefox，Safari，Chrome，Opera，IE等浏览器所支持。

　　如此一来，Canvas的绘图功能就为各种网页制图，以及2D/3D游戏奠定了强大的基础。

　　Canvas标签和 SVG 以及 VML 之间的差异

　　Canvas标签和 SVG 以及 VML 之间的一个重要的不同是， 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。

　　这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。

　　要从同一图形的一个 Canvas标签中移除元素，往往需要擦掉绘图重新绘制它。

　　下面，我们分三部分示例介绍如何使用Canvas标签以及相应的JavaScript API在Web页面绘图。

　　绘图初级篇——矩形

　　在做基本的绘图之前，我们先来介绍Canvas标签的声明。作为一个HTML标签，Canvas的声明方式如下：

　　您的浏览器不支持Canvas!

　　我们声明了一个Canvas标签，对应的ID为canvas。Canvas标签的属性说明如下：

　　属性

　　需要指明的是，由于无法保证所有用户使用的浏览器都能够支持 Canvas 元素，所以在目前开发基于Canvas 的Web 应用中需要增加相应的不兼容文字，以提示用户他们无法正常体验此功能的原因或建议他们去下载最新的浏览器。

　　实际上，单独的一个 canvas 标记只是在页面中定义了一块矩形区域，并无特别之处，开发人员只有配合使用 JavaScript 脚本，才能够完成各种图形，线条，以及复杂的图形变换操作。

　　为了演示最基本的绘图，接下来，我们通过Javascript代码绘制一个红色的矩形。代码部分如下：

　　之所为Canvas标签指定id，是为了在 JavaScript 脚本中获取该 DOM 实例对象。如下：

　　var canvas=document.getElementById('canvas');

　　需要注意的是，基于 Canvas 的绘图并不是直接在 Canvas 标签所创建的绘图画面上进行各种绘图操作，而是依赖画面所提供的渲染上下文，所有的绘图命令和属性都定义在渲染上下文当中。

　　var ctx=canvas.getContext('2d');

　　在通过Canvas id 获取相应的 DOM 对象之后首先要做的事情就是获取渲染上下文对象。 渲染上下文与Canvas一一对应，无论对同一Canvas对象调用几次 getContext() 方法，都将返回同一个上下文对象。

　　ctx.fillStyle='#FF0000';

　　ctx.fillRect(0,0,80,100);

　　目前，所有支持 canvas 标签的浏览器都支持 2D 渲染上下文。

　　最后的效果图：