我怎样才能在canvas，html5中旋转一个形状？

IM试图转动这个我怎样才能在canvas，html5中旋转一个形状？

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

    };

我在做什么错了行？我想我缺少一些步骤。谁能解释一下？

来源

2011-05-14 nope

使用这个代替：

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

来源

2011-05-14 00:04:31

所以才事物的顺序？这是一个规则？所有的转化必须在中风之前完成？ – nope 2011-05-14 00:09:27

当然，当你调用中风时，它会立即画出直线，当调用旋转函数时，直线已经被绘制出来，因此它不会受到旋转的影响，所以你之前这样做。 – Delta 2011-05-14 01:32:40

的旋转（）实际上旋转整个坐标系。其中的默认值为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)

看看这个链接，如何翻译（一个很好的解释）和旋转（）工作： tutsplus tutorial

史蒂夫

来源

2011-05-14 06:40:58 Steve

（+1）这是正确的方法。史蒂夫，你为我节省了大量的时间。 – 2012-11-17 22:53:45

我怎样才能在canvas，html5中旋转一个形状？

回答

相关问题