【】在画布上绘制图形

在Firefox 1.5中，Firefox包括新的HTML元素可编程图形。<canvas>是基于WHATWG的帆布

规范，它本身是基于对苹果的Safari中实现的<canvas>的。它可用于用于呈现图形用户界面的

元素，和其他客户端上的自定义图形。

<canvas>创建一个固定大小的绘图表面显示了一个或多个渲染环境。我们将专注于2D的渲染环

境。对于3D图形，你应该使用WebGL的渲染环境。

[b]2D的渲染环境[/b]

[b]一个简单的案例[/b]
开始时，这里有一个简单的绘制两个相交矩形的实例，其中一个有Alpha透明度：

function draw() {
  var ctx = document.getElementById('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);
}

[table]
|截图|样本
|[img]http://dl.iteye.com/upload/attachment/0084/5278/11502823-f980-3a87-a08b-b71df203ffd6.png[/img]|[img]http://dl.iteye.com/upload/attachment/0084/5280/72604291-b220-3c9b-a284-8067c74f3439.png[/img]


[/table]
绘制函数得到在画布元素，然后获得2D环境。CTX对象可以用来实际呈现在画布上。这个例子只

是填充两个矩形,通过设置两个不同的颜色fillStyle,使用CSS色彩规范并调用fillRect。第二个

fillStyle使用RGBA（）指定alpha值的颜色。

fillRect，strokeRect，clearRect调用渲染来填充，概述，或清晰的矩形。