Interacción de rectángulo de lona simple con JavaScript

StackOverflow https://stackoverflow.com//questions/20009130

Pregunta

Estoy tratando de enseñarme lo básico de la etiqueta de lienzo y la interacción JavaScript.En el siguiente código, puedo hacer que el rectángulo se expanda cuando pase con "Onmouseover", pero no se contraerá cuando "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>

¡Cualquier ayuda será apreciada!

¿Fue útil?

Solución

Intenté esto y funciona.Primero, debe colocar las llamadas de solicitud de solicitud de solicitud en la condición de IF porque, de lo contrario, se encontrará en bucles sin fin.Por otro lado, al contratar el lienzo, debe usar CLEARRECT en lugar de 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>

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top