如何在HTML畫布上旋轉矩形的位置？

我在旋轉矩形的HTML畫布上出現了一些問題。正如您在JS小提琴中看到的，原始圖像如下所示：https://jsfiddle.net/vyx2hbky/。我想要做的就是稍微旋轉線條，比如45度角度。如何在HTML畫布上旋轉矩形的位置？

當我取消在JS小提琴，這是本註釋代碼，

ctx.translate(coords[0], coords[1]); 
ctx.rotate(Math.PI/4);

所有原始矩形就會失控，它看起來像一個爛攤子。他們不是在自己的位置旋轉，我不知道如何解決這個問題。

我已經看過以前的堆棧溢出問題，關於在其中心點旋轉矩形，但我不知道如何找到每個矩形的中心點開始，以及如何我可以複製這個過程畫布中的單個矩形。

我試過做ctx.translate(coords[0] + c.width/2, coords[1] + c.height/2)，根據以前的一些堆棧溢出的答案，但這似乎並不奏效。任何指導將不勝感激！

來源

2016-04-01 Nikhil Sardar

'context.translate（rect.x + rect.width/2，rect.y + rect.height/2）'然後'context.rotate（Math.PI/4）'。繪製之後，確保使用'context.setTransform（1,0,0,1,0,0）'重置轉換。 – markE

嘗試這樣做，只是後「變種COORDS = dotPositions [I];」：

ctx.save(); 
    ctx.translate(coords[0]+5, coords[1]); 
    ctx.rotate(Math.PI/4); 
    ctx.rect(-5, 0, 10, 0); 
    ctx.fill(); 
    ctx.stroke(); 
    ctx.restore();

來源

2016-04-01 08:23:39

如何在HTML畫布上旋轉矩形的位置？

回答

相關問題