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

【问题标题】：Simple Canvas Rectangle Interaction with Javascript与 Javascript 的简单画布矩形交互
【发布时间】：2013-11-15 19:32:54
【问题描述】：

我正在尝试自学 Canvas 标记和 Javascript 交互的基础知识。在下面的代码中，当我用“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>

任何帮助将不胜感激！

【问题讨论】：

标签： javascript canvas rectangles requestanimationframe

【解决方案1】：

我试过了，效果很好。首先，您需要将 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>

【讨论】：

对不起。编辑了我的帖子。 clear 函数已过时。