如何旋轉畫布上下文
[英]How to Rotate Canvas Context
問題描述
如何旋轉畫布對象，例如-
ctx.beginPath();
ctx.fillStyle = 'rgba(52, 52, 53, 0.75)';
ctx.fillRect(50, 50, 100, 100);
它不必是循環，但如何旋轉它呢？
2 個解決方案
解決方案1
0 2014-11-02 20:26:18
像這樣：
<html>
<body>
<canvas id="myCanvas" width="134px" height="331px" onclick="draw()"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle = 'rgba(52, 52, 53, 0.75)';
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>
解決方案2
0 已采納 2014-11-02 20:40:30
@M。 Page的答案的確會導致這種情況旋轉，但不會以您可能認為的方式發生。 通常rotate()不在對象的中間，而是在另一點(0,0) 。 為了解決這個問題，我們需要將對象的中間點設為(0,0) ，然后進行旋轉，然后平移回去。 像這樣：
ctx.translate((c.width/2) - 50, (c.height/2) - 50); // move back
ctx.rotate(20*Math.PI/180); // rotate
ctx.translate((-c.width/2) + 50, (-c.height/2) + 50); // move to 0,0
ctx.fillRect(50, 50, 100, 100); // Notice the middle point would be (x+50, y+50)
注意，這實際上是自下而上完成的，這是圖形堆棧的工作方式。
這是一個示例 ，如果您注釋了translate() ，請注意不同之處。
-50和+50來自將盒子的中心放在中間。 沒有它們，它將繞盒子的右下角而不是盒子的中心旋轉。 給出一個直觀的例子：
基本上，我們想轉換到盒子的中點在(0,0) 。
如何在畫布中旋轉圖像？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.