Tela simples Retângulo de Interação com Javascript

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

Pergunta

Eu estou tentando ensinar-me o básico do Canvas tag de Javascript e interação.No código a seguir, eu posso fazer o retângulo expandir quando eu passar com "onmouseover", mas não vai contrato quando "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>

Qualquer ajuda será bem vinda!

Foi útil?

Solução

Eu tentei isso e funciona.Primeiro, você precisa colocar o requestAnimationFrame chamadas para a condição se porque, caso contrário, você vai correr em loops infinitos.Por outro lado, quando da contratação da tela que você precisa para usar clearRect em vez 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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top