如何刪除onmouseout上的畫布圖像？

我想改變畫布ID'E'的畫布ID'e'的圖像我已經能夠讓mousover工作，並添加一個圖像畫布'A'，但不能刪除它。如何刪除onmouseout上的畫布圖像？

<script> 
      function init() { 
       setImageOne(); 
      } 

      function setImageOne() { setImage('images/paul01.jpg'); } 

      <!--function setImageTwo() { setImage('images/paul02.jpg'); }--> 

      function unsetImageOne() { largeImage('images/full/cartoonPaul02.jpg'); } 

      function setImageTwo() { largeImage('images/full/cartoonPaul01.jpg'); } 

      function setImage(src) { 
       var canvas = document.getElementById("l"); 
       var context = canvas.getContext("2d"); 
       if (context == null) return; 
       var img = new Image(); 
       img.src = src; 
       context.drawImage(img, 0, 0, 166, 276); 
      } 

      function largeImage(src){ 
       var canvas = document.getElementById("A"); 
       var context = canvas.getContext("2d"); 
       if (context == null) return; 
       var img = new Image(); 
       img.src = src; 
       context.drawImage(img, 0, 0, 300, 400); 
      } 
    </script> 
     <div id="container"> 
      <header> 
      <a href='../../'><h3>Everything else</h3></a> 

</header> 
     <div id="main" role="main"> 
     <body onload="init()"> 

      <div class="canvas"> 
       <canvas id="l" width="166" height="276" onmouseover="setImageTwo()" onmouseout="unsetImageOne()"></canvas> 
      </div> 

      <div class="canvas"> 
       <canvas id="A" width="300" height="400"></canvas> 
      </div>

來源

2011-08-18 Cool Guy Yo

從畫布中刪除某些東西是不可能的，因爲當您繪製某些東西時，只會保存像素。因此在繪製後不再有圖像的概念。

但是，您可以執行的操作是在繪製其他圖像之前清除完整的畫布。此代碼可能適用於largeImage。 smallImage也是如此。我還建議您使用image.onload以確保圖像僅在滿載時繪製。

function largeImage(src){ 
    var canvas = document.getElementById("A"); 
    var context = canvas.getContext("2d"); 
    var canvas2 = document.getElementById("l"); 
    var context2 = canvas.getContext("2d"); 
    if (context == null) return; 
    var img = new Image(); 
    img.src = src; 
    context2.clearRect(0, 0, 166, 276); 
    img.onload = function() { 
     context.drawImage(img, 0, 0, 300, 400); 
    } 
}

來源

2011-08-18 16:13:07 pimvdb

如何刪除onmouseout上的畫布圖像？

回答

相關問題