Javascript 围绕任意点旋转：HTML5画布

来看看神奇的消失矩形吧

但说真的，我有一个非常简单的HTML5画布，它只绘制一个矩形（出于某种原因，使用lineTo而不是rect）

我的问题：我正在尝试将矩形旋转90度。矩形应该旋转90度，但它会消失

在我的webapp项目中，当我在HTML5画布上旋转复杂多边形时，我会遇到奇怪的x，y位置错误，所以我创建了这个简单的HTML来测试旋转，并确保它围绕x，y点100100旋转。但当我尝试旋转一个形状时，即使这样也会产生奇怪的结果

有谁能告诉我如何让我的矩形可见&如何在不完全改变x，y值的情况下围绕特定点旋转多边形

有没有人在使用HTML5Canvas时遇到过这个问题，并且知道如何解决这个问题

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

var canvas=document.getElementById（“testCanvas”）；
var dc=canvas.getContext（“2d”）；
clearRect（0，0，canvas.width，canvas.height）；
dc.save（）；
dc.fillStyle=“#FF0000”；
直流旋转（90*Math.PI/180）；//旋转90度
dc.beginPath（）；
dc.moveTo（100100）；
dc.lineTo（200100）；
dc.lineTo（200300）；
dc.lineTo（100300）；
dc.closePath（）；
dc.fill（）；
dc.restore（）；
-->

旋转画布时，它会从原点（0，0）旋转，因此矩形最终会旋转出屏幕

请参见仅旋转45度的示例：

---

解决此问题的一种方法是按画布的宽度和高度平移画布/2:（然后0,0在中间--请注意）

要围绕一个点旋转，需要执行3个步骤

• 首先将上下文转换到要旋转的中心
• 然后做实际的旋转
• 然后把上下文翻译回来

像这样：

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

---

谢谢，它在屏幕上显示出来了，但它并没有绕着100100的x，y点旋转。旋转后的矩形的x、y位置为200600。有没有办法让它围绕一个特定的点旋转（100100）？我用一种不相对于新中心绘制的方法编辑了答案；到角度=（角度+1）%360；这有助于避免不可避免的maxint，即使这个数字真的很大。在5分钟的天文馆里试试“VisualJSGameEngine”。