在Canvas通过JavaScript，如何获得对象的坐标，然后将该对象移至其他坐标

我试图通过按"向上"向下"左"右"one_answers"重置"来移动圆圈，这是将圆圈带回中心。下面是我到目前为止的。在我的新手时，对改进我的代码的任何反馈都将不胜感激。

<!DOCTYPE>
<html lang="en">
<meta charset="UTF-8">
<body>
<button id="reset">Reset</button></br>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid#000000;"></canvas></br>
<button id="left">Left</button>
<button id="up">Up</button>
<button id="down">Down</button>
<button id="right">Right</button>
  <script>
    window.onload = function myCircle() {
    let c = document.getElementById("myCanvas");
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
    }
    function up() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,30,40,0,2*Math.PI);
    ctx.stroke();
    }
    function down() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,-30,40,0,2*Math.PI);
    ctx.stroke();
    }    
    function left() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(85,50,40,0,2*Math.PI);
    ctx.stroke();
    }
    function right() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(105,50,40,0,2*Math.PI);
    ctx.stroke();
    }
    function reset() {
    let c = document.getElementById("myCanvas"); 
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(85,30,40,0,2*Math.PI);
    ctx.stroke();
    }
    document.getElementById("reset").onclick = reset;
    document.getElementById("up").onclick = up;
    document.getElementById("down").onclick = down;
    document.getElementById("left").onclick = left;
    document.getElementById("right").onclick = right;
    </script>
  </body>
 </html>

我还应该提到我尝试使用CTX.ClearRect方法，但这也不起作用。我的最终目标是尝试使用帆布/JavaScript将圆从原始坐标从按钮移至新坐标。

您可以通过以下代码实现此目标：

let c, ctx, pos, centre = { x: 95, y: 50 }
window.onload = function(){
  c = document.getElementById("myCanvas");
  ctx = c.getContext("2d");
  reset();
}
function draw(){
  clear();
  ctx.beginPath();
  ctx.arc(centre.x + pos.left, centre.y + pos.top, 40, 0, 2*Math.PI);
  ctx.stroke();
}
function clear(){
  ctx.clearRect(0, 0, 200,100);
}
function reset() {
  pos = { left: 0, top: 0 }
  draw();
}
function up() {
  pos.top-= 20; // Here you adjust the amount to move
  draw();
}
function down() {
  pos.top+= 20; // Here you adjust the amount to move
  draw();
}
function left() {  
  pos.left-= 20;
  draw();
}
function right() {
  pos.left+= 20;
  draw();
}
document.getElementById("reset").onclick = reset;
document.getElementById("up").onclick = up;
document.getElementById("down").onclick = down;
document.getElementById("left").onclick = left;
document.getElementById("right").onclick = right;

<!DOCTYPE>
<html lang="en">
<meta charset="UTF-8">
<body>
  <button id="reset">Reset</button><br>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas><br>
  <button id="left">Left</button>
  <button id="up">Up</button>
  <button id="down">Down</button>
  <button id="right">Right</button>
</body>
</html>

相关内容

最新更新

热门标签：