我无法让 canvas 围绕某个点旋转

Question

我需要使用 canvas 围绕其中心旋转图像或在本例中为正方形。 如果它在点 (10,16) 并且我将正方形旋转 180 度，我需要该正方形在面朝下时保持在 (10,16)。 我尝试过的方法在随附的代码中。

 const canvas = document.getElementById("canvas") const ctx = canvas.getContext("2d") const size = 50 const pos = canvas.width/4 let rotateAmount = 0; const tests = [ // Test 1 (rotation)=>{ ctx.translate(pos/2+size, pos/2+size) ctx.rotate(Math.PI / 180 * rotation) ctx.fillRect(pos, pos, size, size) }, // Test 2 (rotation)=>{ ctx.translate(size/2+pos, size/2+pos) ctx.rotate(Math.PI / 180 * rotation) ctx.fillRect(pos, pos, size, size) }, // Test 3 (rotation)=>{ ctx.translate(pos/2, pos/2) ctx.rotate(Math.PI / 180 * rotation) ctx.fillRect(pos, pos, size, size) }, // Test 4 (rotation)=>{ ctx.translate(size/2, size/2) ctx.rotate(Math.PI / 180 * rotation) ctx.fillRect(pos, pos, size, size) }, // Test 5 (rotation)=>{ ctx.translate(pos + 0.5 * size, pos + 0.5 * size) ctx.rotate(Math.PI / 180 * rotation) ctx.fillRect(pos, pos, size, size) } ] window.onmousemove = (mouse) => { ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.width, canvas.height) rotateAmount++ tests[document.getElementById("testMethod").value](rotateAmount) }

 canvas{ border-color: violet; border-style: solid; border-width: 5px; }

 <p> Move your mouse to rotate the square </p> <p> Select your test method via the dropdown </p> <select id="testMethod"> <option value="0">Test 1</option> <option value="1">Test 2</option> <option value="2">Test 3</option> <option value="3">Test 4</option> <option value="4">Test 5</option> </select> <button onclick="rotateAmount = 0">Reset Rotation</button> <br> <canvas id="canvas" width="250" height="250"></canvas>

Answer 1

在查看我的问题时找到了答案！ 事实证明，您必须在旋转后翻译回来。 正确的测试是测试 2，因为它将大小除以 2（因此您位于正方形的中心），然后添加 position（因此您位于正方形的中央）。 下面是一个重新翻译的工作示例。

 const canvas = document.getElementById("canvas") const ctx = canvas.getContext("2d") const size = 50 const pos = canvas.width/4 let rotateAmount = 0; const tests = [ // Test 0 (rotation)=>{ ctx.translate(size/2+pos, size/2+pos) ctx.rotate(Math.PI / 180 * rotation) ctx.translate(-size/2-pos, -size/2-pos)// Added Line ctx.fillRect(pos, pos, size, size) } ] window.onmousemove = (mouse) => { ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.width, canvas.height) rotateAmount++ tests[document.getElementById("testMethod").value](rotateAmount) }

 canvas{ border-color: violet; border-style: solid; border-width: 5px; }

 <p> Move your mouse to rotate the square </p> <p> Select your test method via the dropdown </p> <select id="testMethod"> <option value="0">Test</option> </select> <button onclick="rotateAmount = 0">Reset Rotation</button> <br> <canvas id="canvas" width="250" height="250"></canvas>