HTML5 Canvas 初步：字符串，路径，背景，图片(2)_H5之家

如下的示例分别调用了部分上述方法和属性来绘制图形：

<canvas id="canvas" width="600"height="400"> <p>Your browserdoes not support the canvas element!</p> </canvas> <script type="text/javascript"> window.onload = function() { var canvas =document.getElementById("canvas"); var context2D =canvas.getContext("2d"); //绘制相交的线段 context2D.beginPath(); context2D.moveTo(50,50); context2D.lineTo(100,100); context2D.moveTo(200,50); context2D.lineTo(100,100); context2D.stroke(); //绘制与这两条线段相切的红色圆弧 context2D.beginPath(); context2D.strokeStyle= "#ff0000"; context2D.moveTo(50,50); context2D.arcTo(100,100, 200, 50, 100); context2D.stroke(); //绘制一个蓝色的圆 context2D.beginPath(); context2D.strokeStyle= "#0000ff"; context2D.arc(300,250, 100, 0, Math.PI * 2, false); context2D.stroke(); //将上面的圆填充为灰色 context2D.fillStyle ="#a3a3a3"; context2D.fill(); //在上面的圆中剪辑一个圆形方形区域 context2D.beginPath(); context2D.rect(250,200, 100, 100); context2D.clip(); //在剪辑区域中填充一个大于该区域尺寸的矩形 context2D.fillStyle ="yellow"; context2D.fillRect(0,0, 400, 400); } </script> 画布背景

在上面的例子中，调用了fillRect()方法。实际上，Context对象拥有3个方法可以直接在画布上绘制图形而不需要路径，可以将其视为直接在画布背景中绘制。这3个方法的原型如下：

void fillRect(left, top,width, height);

用于使用当前的fillStyle（默认为”#000000”，黑色）样式填充一个左上角顶点在(left, top)点、宽为width、高为height的矩形。

void strokeRect(left, top,width, height);

用于使用当前的线条风格绘制一个左上角顶点在(left, top)点、宽为width、高为height的矩形边框。

void clearRect(left, top,width, height);

用于清除左上角顶点在(left,top)点、宽为width、高为height的矩形区域内的所有内容。

图片

Context对象中拥有drawImage()方法可以将外部图片绘制到Canvas中。drawImage()方法的3种原型如下：

drawImage(image, dx, dy);

drawImage(image, dx, dy,dw, dh);

drawImage(image, sx, sy,sw, sh, dx, dy, dw, dh);

下图展示了原型中各参数的含义：

其中，image参数可以是HTMLImageElement、HTMLCanvasElement或者HTMLVideoElement。第三个方法原型中的sx、sy在前两个中均为0，sw、sh均为image本身的宽和高；第二和第三个原型中的dw、dh在第一个中也均为image本身的宽和高。

如下的示例将一张远程图片绘制到了画布中：

以上代码均通过Google Chrome 14.0及Mozilla Firefox 7.0浏览器测试。