간단한 캔버스 사각형 자바 스크립트와의 상호 작용

캔버스 태그와 자바 스크립트 상호 작용의 기초를 스스로 가르치려고합니다. 다음 코드에서는 "onmouseover"를 가리킬 때 사각형을 확장 할 수 있지만 "onmouseout"은 축소되지 않습니다.간단한 캔버스 사각형 자바 스크립트와의 상호 작용

<!DOCTYPE html> 
<html> 
    <head> 
     <script> 
      window.requestAnimationFrame = (function(){ 
       return window.requestAnimationFrame  || 
         window.webkitRequestAnimationFrame || 
         window.mozRequestAnimationFrame || 
         function(callback){ 
         window.setTimeout(callback, 1000/60); 
         }; 
      })(); 

      var rectWidth = 100; 

      function clear() { 
       var c=document.getElementById("myCanvas"); 
       var ctx=c.getContext("2d"); 
       ctx.clearRect(0, 0, ctx.width, ctx.height); 
      } 

      function widenRect(){ 
       var c=document.getElementById("myCanvas"); 
       var ctx=c.getContext("2d"); 
       clear(); 
       ctx.fillStyle="#92B901"; 
       ctx.fillRect(0,0,rectWidth,100); 
       if(rectWidth < 200){ 
        rectWidth+=10; 
       } 
       requestAnimationFrame(widenRect); 
      } 

      function narrowRect(){ 
       var c=document.getElementById("myCanvas"); 
       var ctx=c.getContext("2d"); 
       clear(); 
       ctx.fillStyle="#92B901"; 
       ctx.fillRect(0,0,rectWidth,100); 
       if(rectWidth > 100){ 
        rectWidth-=10; 
       } 
       requestAnimationFrame(narrowRect); 
      } 
     </script> 
    </head> 
    <body> 
     <canvas id="myCanvas" width="200" height="100" onmouseover="widenRect()" onmouseout="narrowRect()"> 
      Your browser does not support the HTML5 canvas tag. 
      <script> 
       var c=document.getElementById("myCanvas"); 
       var ctx=c.getContext("2d"); 
       ctx.fillStyle="#92B901"; 
       ctx.fillRect(0,0,rectWidth,100); 
      </script> 
     </canvas> 
    </body> 
</html>

도움을 주실 수 있습니다!

출처

2013-11-15 SolarisRa

시도해 보았습니다. 먼저 requestAnimationFrame 호출을 if 조건에 넣어야합니다. 그렇지 않으면 무한 루프로 실행되기 때문입니다. 캔버스를 축소 할 때는 fillRect 대신 clearRect를 사용해야합니다.

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
     window.requestAnimationFrame = (function(){ 
      return window.requestAnimationFrame  || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        function(callback){ 
         window.setTimeout(callback, 1000/60); 
        }; 
     })(); 

     var rectWidth = 100; 

     function widenRect(){ 
      var c=document.getElementById("myCanvas"); 
      var ctx=c.getContext("2d"); 
      ctx.fillStyle="#92B901"; 
      ctx.fillRect(0,0,rectWidth,100); 
      if(rectWidth <= 200){ 
       rectWidth+=10; 
       requestAnimationFrame(widenRect); 
      } 
     } 

     function narrowRect(){ 
      var c=document.getElementById("myCanvas"); 
      var ctx=c.getContext("2d"); 
      ctx.fillStyle="#92B901"; 
      ctx.clearRect(rectWidth,0,200 - rectWidth,100); 
      if(rectWidth > 100){ 
       rectWidth-=10; 
       requestAnimationFrame(narrowRect); 
      } 
     } 
    </script> 
</head> 
<body> 
<canvas id="myCanvas" width="200" height="100" onmouseover="widenRect()" onmouseout="narrowRect()"> 
    Your browser does not support the HTML5 canvas tag. 
    <script> 
     var c=document.getElementById("myCanvas"); 
     var ctx=c.getContext("2d"); 
     ctx.fillStyle="#92B901"; 
     ctx.fillRect(0,0,rectWidth,100); 
    </script> 
</canvas> 
</body> 
</html>

출처

2013-11-15 19:51:45 sebbo

내 clear() 함수가 제대로 작동하지 않는다는 의미입니까? – SolarisRa

죄송합니다. 내 게시물을 수정했습니다. 명확한 기능은 쓸모 없게되었습니다. – sebbo

간단한 캔버스 사각형 자바 스크립트와의 상호 작용

답변

관련 문제