html5清除canvas画布内容

之前看到的关于html5清除canvas画布内容的博客，转载过来，以备不时之需。

　　首先介绍下drawImage()方法；

　　说到drawImage()就不得带一下canvas；canvas是HTML5中引入的新的元素，其drawImage 方法允许在 　　　　canvas 中插入其他图像( img 和 canvas 元素) 。

　　drawImage函数有三种函数原型：

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

　　第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。 dx和dy是image在canvas中定位的坐标值；dw和dh是image在canvas中的实际宽度和高度值（宽高会压缩或拉伸）；sx和sy是所 要绘制的图片块在提供的image上的相对起始位置坐标（相对image），sw和sh是所要绘制的图片块在提供的image上的相对终点位置坐标（相对 image）。

以第一种为例（这个效果图就不贴出来了），js：

var imageObj = new Image();
imageObj.src = "PublicFiles/2.jpg";
imageObj.onload = function(){
context.drawImage(imageObj,400,100);
};

清除方法一、

在这个图片的位置接着画一个矩形，覆盖这个图片，并且把颜色设置成和背景色一样就OK了！代码如下：

context.fillStyle="ffffff";//白色为例子；

context.fillRect(400,100,400,100);

注意，上面的代码要放在imageObj.onload里面才有效果；

清除的方法二，用clearRect()方法，代码如下：

context.clearRect(400,100,imageObj.width,100);//清除画布上的指定区域；

注意，上面的代码要放在imageObj.onload里面才有效果；