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本身的宽和高。
如下的示例将一张远程图片绘制到了画布中：
复制代码
<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”);
var pic = new Image();
pic.src =”http://imgsrc.baidu.com/forum/pic/item/e6b14bc2a4561b1fe4dd3b24.jpg”;
context2D.drawImage(pic,0, 0);
}
</script>
以上代码均通过Google Chrome 14.0及Mozilla Firefox 7.0浏览器测试。
