onmouseout에서 캔버스 이미지를 제거하는 방법?

Canvas ID 'A'에서 캔버스 ID 'A'의 이미지를 캔버스 ID 'mouseover'로 변경하려고합니다. '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에서 캔버스 이미지를 제거하는 방법?

답변

관련 문제