html 清除画布内容,html5清除canvas画布内容

昨天在HMTL5的交流群中有人问“用context.drawImage(img,10,0);后怎么清除画进去的这张图”！

本人刚好知道2种方法，考虑到现在HTML5还不是很普及，可能有的人需要，今天贴出来大家交流下！

本人也不是什么高手，欢迎评论指点…

首先介绍下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里面才有效果；

效果图如下(红色的部分是被清除掉的)：