【轉】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)    //開始坐標和結束坐標 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM