Question

快来看看惊人的消失的矩形吧！

但严重的是我有一个非常简单的HTML5画布，它只绘制一个矩形（使用lineTo而不是rect ，原因）。

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

在我的webapp项目中，当我在HTML5画布中旋转我的复杂多边形时，我得到了奇怪的x，y放置错误，所以我创建了这个简单的HTML来测试旋转＆amp;确保其绕x，y点100,100旋转。但是，当我尝试旋转形状时，即使这样也有奇怪的结果。

任何人都可以告诉我如何让我的矩形可见＆amp;如何围绕特定点旋转我的多边形，而不必完全改变x，y值。

有没有人遇到过这个问题的HTML5 canvas'＆amp;知道解决这个问题的解决方案吗？

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

Answer 1

要绕点旋转，您需要执行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);
    dc.rotate( angle*Math.PI/180 ); 
    dc.translate(-150,-200);

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

Answer 2

当您旋转画布时，它会从原点（0,0）旋转，因此您的矩形最终会从屏幕上旋转。

请参阅此示例，它仅旋转45度：http://jsfiddle.net/wjLSm/

解决这个问题的一种方法是将画布的宽度和宽度进行平移。高度/ 2：http://jsfiddle.net/wjLSm/1/（然后0,0位于中间 - 请注意这一点）

围绕任意点旋转：HTML5 Canvas

2 个答案: