这是我的代码:
//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
and y
。如果上面的代码有效,为什么不旋转它然后执行此代码?我该如何解决这个问题?