метод поворота, заставляющий все вращаться - PullRequest
Новая
       5

метод поворота, заставляющий все вращаться

0 голосов
/ 31 января 2019

У меня есть прямоугольник в методе setInterval и, используя метод rotate, он вращается, как и ожидалось, но когда я добавляю еще один элемент над прямоугольником, он также вращается.Я попытался извлечь его как отдельную функцию, но кажется, что все элементы наследуют вращение. 

<!DOCTYPE html>
<html>
<body>
<canvas id="paper" width="500" height="500"></canvas>
</body>
<script>
window.onload = function(){

var canvas = document.getElementById("paper"),
c = canvas.getContext("2d");

c.fillStyle = "#00ffff";
c.fillRect(0,0,500,500);

c.translate(250,250);

c.fillStyle = "#ff0000";
c.beginPath();
c.arc(100,100,10,0,Math.PI*2,false);
c.fill();

c.fillStyle = "#ff0000";
c.fillRect(0,0,2,500);



setInterval(function(){

 c.fillStyle = "#00ffff";
 c.fillRect(0,0,500,500);

 c.fillStyle = "#ff0000";
 c.beginPath();
 c.arc(100,100,10,0,Math.PI*2,false);
 c.fill();

 c.rotate(.01);
 c.fillStyle = "#ff0000";
 c.fillRect(0,0,2,500);

},30);

};

</script>
</html>

1 Ответ

0 голосов
/ 31 января 2019

Вы вращаете матрицу преобразования.вам нужно save перед поворотом и restore после рисования.

пример: 

    window.onload = function () {

        var canvas = document.getElementById("paper"),
            c = canvas.getContext("2d");

        c.fillStyle = "#00ffff";
        c.fillRect(0, 0, 500, 500);

        c.translate(250, 250);

        c.fillStyle = "#ff0000";
        c.beginPath();
        c.arc(100, 100, 10, 0, Math.PI * 2, false);
        c.fill();

        c.fillStyle = "#ff0000";
        c.fillRect(0, 0, 2, 500);

        // radians
        var angle = 0;

        setInterval(function () {

            c.fillStyle = "#00ffff";
            c.fillRect(0, 0, 500, 500);

            c.fillStyle = "#ff0000";
            c.beginPath();
            c.arc(100, 100, 10, 0, Math.PI * 2, false);
            c.fill();

            // saving current state
            c.save();
            c.rotate(angle += .01);
            c.fillStyle = "#ff0000";
            c.fillRect(0, 0, 2, 500);
            // restore previous state
            c.restore();

        }, 30);

    };
<canvas id="paper" width="500" height="500"></canvas>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...