Interaction rectangle de toile simple avec JavaScript

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

Question

J'essaie de m'enseigner les bases de la balise de toile et de l'interaction JavaScript.Dans le code suivant, je peux rendre le rectangle à se développer lorsque je verrouille avec "Onmouseover", mais il ne s'agira pas de contrat quand "Onmceout". 

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

Toute aide sera appréciée!

Était-ce utile?

La solution

J'ai essayé cela et ça marche.Vous devez d'abord mettre les appels demandaImationFrame dans la condition IF car sinon vous passerez dans des boucles sans fin.D'autre part, lors de la sous-traitance de la toile, vous devez utiliser ClearRect au lieu de FLIDRECT.

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top