【】在画布上绘制图形

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

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

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

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

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

2D的渲染环境

一个简单的案例
开始时，这里有一个简单的绘制两个相交矩形的实例，其中一个有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);
}

截图	样本

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

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

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

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