Question

这是我的代码：

//ct is a canvas context for drawing stuff
//bw is image width, bh is image height
function drawBox() {
    ct.translate(x, y)
    ct.rotate(rot)
    ct.drawImage(box, -bw/2, -bh/2)
    ct.fillRect((-bw/2) + (50 * Math.sin(rot)), (-bh/2) - (50 * Math.cos(rot)), 20, 20)
    ct.rotate(-rot)
    ct.translate(-x, -y)
}

应该绘制框，然后将矩形放在其前面50个像素。但是，它不起作用。每次图像旋转一次时，矩形围绕图像旋转两次。

我做了一些实验，这段代码有效：

function drawBox() {
    ct.drawImage(box, x, y)
    ct.fillRect((x) + (50 * Math.sin(rot)), (y) - (50 * Math.cos(rot)), 20, 20)
}

我删除了旋转并将坐标更改为x和y。如果上面的代码有效，为什么不旋转它然后执行此代码？我该如何解决这个问题？

Answer 1

我似乎已经解决了这个问题。我意识到问题是我在绘制另一个盒子时绕错了点，所以我使用了这段代码：

function drawBox() {
    ct.translate(x, y)
    ct.rotate(rot)
    ct.drawImage(box, -halfbw, -halfbh)
    ct.rotate(-rot)
    ct.translate(-x, -y)
    if (sCount > 0) {
        sCount --
        ct.translate(x, y+halfbh)
        ct.rotate(rot+PI)
        ct.fillRect((halfbh * Math.sin(rot)), (halfbh * Math.cos(rot))+halfbh, 10, 50)
        ct.rotate(-rot-PI)
        ct.translate(-x, -y-halfbh)
    }
}

（我添加了几个不相关的东西，比如sCount，但这基本上就是问题所在。）我不得不翻译和取消旋转所以我可以重新翻译并旋转到第二个盒子就在正确的位置。

将广场放在其他广场前面

1 个答案: