Простой холст Прямоугольник Взаимодействие с Javascript

Я пытаюсь научить себя основам тегов Canvas и Javascript. В следующем коде я могу сделать прямоугольник расширяющимся, когда я навешиваю «onmouseover», но он не будет сокращаться, когда «onmouseout».Простой холст Прямоугольник Взаимодействие с Javascript

<!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, потому что иначе вы столкнетесь с бесконечными циклами. С другой стороны, при сжатии холста вам нужно использовать clearRect вместо fillRect.

<!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

Простой холст Прямоугольник Взаимодействие с Javascript

ответ

Смежные вопросы