нарисовать квадрат и повернуть его?

Question

почему это не работает?вращение работает только с изображениями?

            context.moveTo(60,60);
            context.lineTo(200,60);
            context.lineTo(200,200);
            context.lineTo(60,200);
            context.lineTo(60,60);


            context.stroke();
            context.rotate(45 * Math.PI / 180);
            context.restore();

Answer 1

Вы вращаете весь холст, когда используете context.rotate, и, поскольку точка поворота по умолчанию установлена ​​в координатах (0, 0), ваш квадрат иногда будет вытянут из границ.

При перемещенииось поворота к середине квадрата, вы можете успешно повернуть его.

Примечание : убедитесь, что вы вращаете холст, прежде чем начертите квадрат.

// pivot point coordinates = the center of the square
var cx = 130; // (60+200)/2
var cy = 130; // (60+200)/2

// Note that the x and y values of the square 
// are relative to the pivot point.
var x = -70; // cx + x = 130 - 70 = 60
var y = -70; // cy + y = 130 - 70 = 60
var w = 140; // (cx + x) + w = 60 + w = 200
var h = 140; // (cy + y) + h = 60 + h = 200
var deg = 45;

context.save();

context.translate(cx, cy);
context.rotate(deg * Math.PI/180);

context.fillRect(x, y, w, h);

context.restore();

Пояснение:

• context.save(); сохраняет текущее состояние системы координат.

• context.translate(cx, cy); перемещает точку поворота.

• context.rotate(deg * Math.PI/180); поворачивает квадрат до deg градусов (обратите внимание, что параметр в радианах, а не градусах)

• context.fillRect( x, y, w, h ); рисует квадрат

• context.restore(); восстанавливает последнее состояние системы координат.

Вот пример JS Fiddle .

Вот еще один пример JS Fiddle с ползунком HTML5 .