Вращение вокруг произвольной точки: HTML5 Canvas

Question

Приходите посмотреть на удивительный исчезающий прямоугольник!

А если серьезно, у меня есть действительно простой холст HTML5, который просто рисует прямоугольник (используя lineTo вместо по причине ).

Моя проблема: Я пытаюсь повернуть прямоугольник на 90 градусов. Прямоугольник должен быть повернут на 90 градусов, но вместо этого он исчезает.

В моем проекте веб-приложения я получаю странные x, y-ошибки размещения, когда я поворачиваю свои сложные многоугольники в HTML5 canvas ', поэтому я создал этот простой HTML-код для проверки поворота и обеспечения его поворота вокруг точки x, y, равной 100 100. Но даже это имеет странные результаты, когда я пытаюсь повернуть фигуру.

Может кто-нибудь сказать мне, как сделать мой прямоугольник видимым и как я могу вращать свои многоугольники вокруг определенной точки без их полного изменения значений x, y.

Кто-нибудь испытывал эту проблему с HTML5 canvas 'и знает решения, чтобы это исправить?

<canvas id="testCanvas" width="900px" height="900px" style="background-color: blue;">

</canvas>
<script type="text/javascript">

    var canvas = document.getElementById("testCanvas");
    var dc     = canvas.getContext("2d");

    dc.clearRect(0, 0, canvas.width, canvas.height);

    dc.save();
    dc.fillStyle = "#FF0000";

    dc.rotate( 90*Math.PI/180 );  // rotate 90 degrees
    dc.beginPath();
    dc.moveTo(100, 100);
    dc.lineTo(200, 100);
    dc.lineTo(200,300);
    dc.lineTo(100,300);
    dc.closePath();
    dc.fill();

    dc.restore();
-->
</script>

Answer 1

Чтобы повернуть точку, нужно сделать 3 шага.

• Сначала переведите контекст в центр, вокруг которого вы хотите повернуть.
• Затем выполните фактическое вращение.
• Затем переведите контекст обратно.

Как это:

var canvas = document.getElementById("testCanvas");
var dc     = canvas.getContext("2d");
var angle = 0;
window.setInterval(function(){
    angle = (angle + 1) % 360;
    dc.clearRect(0, 0, canvas.width, canvas.height);

    dc.save();
    dc.fillStyle = "#FF0000";

    dc.translate(150,200);
    dc.rotate( angle*Math.PI/180 ); 
    dc.translate(-150,-200);

    dc.beginPath();
    dc.moveTo(100, 100);
    dc.lineTo(200, 100);
    dc.lineTo(200,300);
    dc.lineTo(100,300);
    dc.closePath();
    dc.fill();

    dc.restore();
}, 5);

Answer 2

Когда вы поворачиваете холст, он поворачивается от начала координат (0, 0), поэтому ваш прямоугольник заканчивается вращением за пределы экрана.

См. Этот пример, где он поворачивается только на 45 градусов: http://jsfiddle.net/wjLSm/

Один из способов исправить это - перевести холст по его ширине и высоте / 2: http://jsfiddle.net/wjLSm/1/ (тогда 0,0 посередине - помните об этом)