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

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

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

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

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

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

Кто-нибудь сталкивался с этой проблемой с холстом HTML5 и знал, как это исправить?

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

Ответ 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); // First translate the context to the center you wish to rotate around.
    dc.rotate( angle*Math.PI/180 ); // Then do the actual rotation.
    dc.translate(-150,-200); // Then translate the context back.

    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);

Ответ 2

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

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

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