Как я могу повернуть форму на холсте, HTML5?

Question

Я пытался повернуть строку с этим

window.onload= function(){
        var canvas=document.getElementById("foo");
        var context=canvas.getContext("2d");

        context.moveTo(250, 50);
        context.lineTo(250, 250);
        context.stroke();
        context.rotate(0.30);

    };

что я делаю не так? я думаю, что я пропускаю некоторые шаги. кто-нибудь может объяснить?

Answer 1

rotate () фактически вращает всю систему координат.По умолчанию 0,0 (верхний левый угол холста).Вам нужно сделать что-то вроде этого:

context.save(); // saves the coordinate system
context.translate(250,50); // now the position (0,0) is found at (250,50)
context.rotate(0.30); // rotate around the start point of your line
context.moveTo(0,0) // this will actually be (250,50) in relation to the upper left corner
context.lineTo(0,200) // (250,250)
context.stroke();
context.restore(); // restores the coordinate system back to (0,0)

Проверьте эту ссылку для действительно хорошего объяснения того, как translate () и rotate () работают: tutsplus tutorial

Стив

Answer 2

Используйте это вместо:

context.rotate(0.30); // <<< set current transformation to rotated
context.moveTo(250, 50);
context.lineTo(250, 250);
context.stroke();