简单的画布矩形与Javascript的交互

我想教我自己的画布标签和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的交互

回答

相关问题