Javascript 绕任意点旋转：HTML5 Canvas
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8936803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotating around an arbitrary point: HTML5 Canvas
提问by sazr
Come see the amazing disappearing rectangle!
快来看看神奇的消失矩形吧！
But seriously I have a really simple HTML5 canvas that just draws a rectangle(using lineTo instead of rect for a reason).
但说真的，我有一个非常简单的 HTML5 画布，它只绘制一个矩形（出于某种原因使用 lineTo 而不是 rect ）。
My Problem:I am attempting to rotate the rectangle 90 degrees. The rectangle should be rotated 90 degrees but instead it disappears.
我的问题：我试图将矩形旋转 90 度。矩形应该旋转 90 度，但它会消失。
In my webapp project I am getting weird x,y placement errors when I rotate my complex polygons in HTML5 canvas', so I have created this simple HTML to test rotation & ensure its rotating around its x,y point of 100,100. But even this has weird results when I attempt to rotate a shape.
在我的 webapp 项目中，当我在 HTML5 画布中旋转我的复杂多边形时，我遇到了奇怪的 x,y 放置错误，所以我创建了这个简单的 HTML 来测试旋转并确保它围绕 100,100 的 x,y 点旋转。但是当我尝试旋转形状时，即使这样也会产生奇怪的结果。
Can anyone tell me how to get my rectangle visible & how I can rotate my polygons around a specific point without them completely changing x,y values.
谁能告诉我如何让我的矩形可见以及如何在不完全改变 x、y 值的情况下围绕特定点旋转我的多边形。
Has anyone experienced this issue with HTML5 canvas' & know solutions to fix this?
有没有人在 HTML5 画布上遇到过这个问题并知道解决这个问题的解决方案？
<canvas id="testCanvas" width="900px" height="900px" style="background-color: blue;">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("testCanvas");
var dc = canvas.getContext("2d");
dc.clearRect(0, 0, canvas.width, canvas.height);
dc.save();
dc.fillStyle = "#FF0000";
dc.rotate( 90*Math.PI/180 ); // rotate 90 degrees
dc.beginPath();
dc.moveTo(100, 100);
dc.lineTo(200, 100);
dc.lineTo(200,300);
dc.lineTo(100,300);
dc.closePath();
dc.fill();
dc.restore();
-->
</script>
回答by david
To rotate around a point you need to do 3 steps.
要围绕一个点旋转，您需要执行 3 个步骤。
- First translate the context to the center you wish to rotate around.
- Then do the actual rotation.
- Then translate the context back.
- 首先将上下文转换到您希望旋转的中心。
- 然后进行实际的旋转。
- 然后将上下文翻译回来。
Like this:
像这样：
var canvas = document.getElementById("testCanvas");
var dc = canvas.getContext("2d");
var angle = 0;
window.setInterval(function(){
angle = (angle + 1) % 360;
dc.clearRect(0, 0, canvas.width, canvas.height);
dc.save();
dc.fillStyle = "#FF0000";
dc.translate(150,200); // First translate the context to the center you wish to rotate around.
dc.rotate( angle*Math.PI/180 ); // Then do the actual rotation.
dc.translate(-150,-200); // Then translate the context back.
dc.beginPath();
dc.moveTo(100, 100);
dc.lineTo(200, 100);
dc.lineTo(200,300);
dc.lineTo(100,300);
dc.closePath();
dc.fill();
dc.restore();
}, 5);
回答by Mark Kahn
When you rotate the canvas, it rotates from the origin (0, 0), so your rectangle ends up getting rotated off the screen.
当您旋转画布时，它会从原点 (0, 0) 旋转，因此您的矩形最终会旋转离开屏幕。
See this example where it's only rotated 45 deg: http://jsfiddle.net/wjLSm/
请参阅仅旋转 45 度的示例：http: //jsfiddle.net/wjLSm/
One way to fix this is to translate the canvas by its width & height/2: http://jsfiddle.net/wjLSm/1/(then 0,0 is at the middle -- be aware of this)
解决此问题的一种方法是按宽度和高度/2 平移画布：http: //jsfiddle.net/wjLSm/1/（然后 0,0 位于中间 - 请注意这一点）
