Простое взаимодействие прямоугольника холста с JavaScript

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

Вопрос

Я пытаюсь научить себя основы бак холста и взаимодействия JavaScript.В следующем коде я могу сделать прямоугольник расширяться, когда я зависаю с «OnMouseover», но он не будет контрактов, когда «OnMouseoutout». 

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

Любая помощь будет оценена!

Это было полезно?

Решение

Я попробовал это, и это работает.Сначала вам нужно поставить запросные вызовы запросов на условие, потому что в противном случае вы столкнетесь с бесконечными петлями.С другой стороны, когда договаривался холст, вам нужно использовать CLELRECT вместо 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>
.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top