これが私のコードです:
//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 ピクセルの四角形を配置することになっています。しかし、それは機能していません。画像が 1 回回転するたびに、長方形は画像の周りを 2 回回転します。
私は少し実験しましたが、このコードは機能します:
function drawBox() {
ct.drawImage(box, x, y)
ct.fillRect((x) + (50 * Math.sin(rot)), (y) - (50 * Math.cos(rot)), 20, 20)
}
回転を削除し、座標をx
とに変更しましたy
。上記のコードが機能する場合、それを回転させてからこのコードを実行しても機能しないのはなぜですか? この問題を解決するにはどうすればよいですか?