昨天在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) //開始坐標和結束坐標
本人剛好知道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) //開始坐標和結束坐標