javascript - 我如何在 canvas,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( Canvas 的左上角)。您需要按照以下方式做一些事情:

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

史蒂夫