javascript 绕任意点旋转：HTML5画布

t0ybt7op 于 2023-01-16 发布在 Java

关注(0)|答案(3)|浏览(190)

快来看看神奇的消失的长方形！
但说真的，我有一个非常简单的HTML5画布，它只画了一个矩形（使用lineTo而不是rect是有原因的）。

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

在我的webapp项目中，当我在HTML5画布中旋转复杂的多边形时，我会遇到奇怪的x，y位置错误，所以我创建了这个简单的HTML来测试旋转&确保它围绕其x，y点100，100旋转。但即使这样，当我尝试旋转一个形状时，也会出现奇怪的结果。
有谁能告诉我如何让我的矩形可见&我如何能绕着一个特定的点旋转我的多边形而不让它们完全改变x，y值。
有没有人经历过这个问题与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>

JavaScript

来源：https://stackoverflow.com/questions/8936803/rotating-around-an-arbitrary-point-html5-canvas

3条答案

按热度按时间

ee7vknir1#

要围绕一个点旋转，您需要执行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);

赞(0）回复(0）举报 2023-01-16

ajsxfq5m2#

旋转画布时，它会从原点（0，0）旋转，因此矩形最终会旋转到屏幕之外。
请参见仅旋转45度的示例：http://jsfiddle.net/wjLSm/
解决此问题的一种方法是按画布的宽度和高度/2平移画布：http://jsfiddle.net/wjLSm/1/（那么0，0位于中间--请注意这一点）

赞(0）回复(0）举报 2023-01-16

ztyzrc3y3#

你是说这样吗？

var canvas = document.getElementById("testCanvas");
var dc = canvas.getContext("2d");

dc.clearRect(0, 0, canvas.width, canvas.height);
dc.save();
dc.fillStyle = "#FF0000";
dc.translate(200, -100);
dc.rotate(45 * Math.PI / 180);
dc.beginPath();
dc.moveTo(100, 100);
dc.lineTo(200, 100);
dc.lineTo(200, 300);
dc.lineTo(100, 300);
dc.closePath();
dc.fill();

// rotate 90 degrees

dc.restore();

<canvas id="testCanvas" width="900px" height="900px" style="background-color: blue;">

</canvas>

赞(0）回复(0）举报 2023-01-16

我来回答

javascript 绕任意点旋转：HTML5画布

3条答案

相关问题

热门标签

最新问答