清除重新加載圖像的畫布？

我正在使用html5圖像標記向canvs寫一個圖像。我想要它取代最新圖像onclick新圖像.. 我能夠加載圖像，但點擊下一個圖像它重疊最後加載的圖像.. 這裏是代碼.. 我在嘗試使用clearRect（）函數

  function drawImage(imageObj){ 

      var stage = new Kinetic.Stage("container", 578, 500); 
      var layer = new Kinetic.Layer(); 
      var x = stage.width/2 - 200/2; 
      var y = stage.height/2 - 137/2; 
      var width = 200; 
      var height = 137; 

      // darth vader 
      var darthVaderImg = new Kinetic.Shape(function(){ 
       var context = this.getContext(); 

       context.clearRect(x,y,width,height); 
       context.drawImage(imageObj, x, y, width, height); 
       // draw invisible detectable path for image 
       context.beginPath(); 
       context.rect(x, y, width, height); 
       context.closePath(); 


      });

來源

2012-02-24 ashishashen

具有u試圖canvas.width = canvas.width; ???? – thecodejack 2012-02-24 12:31:19

試過這個..不工作..和canvas.width = canvas.width將清除整個畫布..我只是想要一個部分被刪除..所以使用context.clearRect（x，y，寬度，高度）但它在這裏也不起作用。 – ashishashen 2012-02-24 12:46:48

檢查此post。

canvas.width = canvas.width;

應清除您的畫布。

來源

2012-02-24 12:35:29 cago

試過這個..不工作..和canvas.width = canvas.width將清除整個畫布..我只想要一個部分被刪除..所以使用context.clearRect（x，y，寬度，高度）但它也沒有在這裏工作 – ashishashen 2012-02-24 12:48:02

你讀過這篇文章的第二個答案（http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing）？嘗試使用clearRect（）完成清理時保存並恢復上下文。 – cago 2012-02-24 14:51:49

嘿，我已經得到它..我的kinetic.js文件已過時...所以不得不更新它，清晰的畫布功能被添加到它..謝謝反正.. :) – ashishashen 2012-02-27 06:38:22

使用此功能，我創建

這樣調用它 - clearCanvasGrid(/id of the canvas/)

function clearCanvasGrid(canvasname){ 
      var canvas = document.getElementById(canvasname); //because we are looping //each location has its own canvas ID 
      var context = canvas.getContext('2d'); 
      //context.beginPath(); 

      // Store the current transformation matrix 
      context.save(); 

      // Use the identity matrix while clearing the canvas 
      context.setTransform(1, 0, 0, 1, 0, 0); 
      context.clearRect(0, 0, canvas.width, canvas.height); 

      // Restore the transform 
      context.restore(); //CLEARS THE SPECIFIC CANVAS COMPLETELY FOR NEW DRAWING 

     }

來源

2012-11-18 09:25:29 Knights

清除重新加載圖像的畫布？

回答

相關問題