Question

我在HTML画布上旋转矩形时遇到了一些问题。正如你在JS Fiddle中看到的那样，原始图像显示在这里：https://jsfiddle.net/vyx2hbky/。我想要做的是稍微旋转线条，比如说，45度，在它们的位置。

当我取消注释JS Fiddle中的注释代码时，就是这样，

ctx.translate(coords[0], coords[1]);
ctx.rotate(Math.PI / 4);

所有原始的矩形都变得混乱，看起来像一团糟。他们不是在自己的位置旋转，我不确定如何解决这个问题。

我已经查看了之前关于在其中心点旋转矩形的Stack Overflow问题，但我不确定如何找到每个矩形的中心点，以及如何为每个单独复制此过程画布中的矩形。

根据之前的一些Stack Overflow答案，我尝试过ctx.translate(coords[0] + c.width / 2, coords[1] + c.height / 2)，但这似乎不起作用。任何指导将不胜感激！

Answer 1

尝试这样做，就在＆＃34; var coords = dotPositions [i];＆＃34;：

之后

    ctx.save();
    ctx.translate(coords[0]+5, coords[1]);
    ctx.rotate(Math.PI / 4);
    ctx.rect(-5, 0, 10, 0);
    ctx.fill();
    ctx.stroke();
    ctx.restore();

如何在HTML画布上旋转矩形？

1 个答案: