【转】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里面才有效果；
-------------------------------------------------------------------------------
 后来问了群里的人，可以通过多个canvas来删除当前画布的图片 ctx.clearRect(10,10,100,100)    //开始坐标和结束坐标