我试图用这个旋转一条线
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);
};
我做错了什么?我想我错过了一些步骤。谁能解释一下?
最佳答案
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
史蒂夫
关于javascript - 我如何在 canvas,html5 中旋转一个形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5998924/