在通过 JavaScript 的 Canvas 中，如何获取对象的坐标，然后将该对象移动到不同的坐标？

Question

I am trying to move the circle by pressing the "up" "down" "left" "right", and "reset" is to bring the circle back in the center.我试图通过按“上”“下”“左”“右”来移动圆圈，而“重置”是将圆圈带回中心。 Below is what I have so far.以下是我到目前为止所拥有的。 As I am new to this, any feedback on improving my code will be greatly appreciated.由于我是新手，任何有关改进我的代码的反馈都将不胜感激。

<!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>

I should also mention that I have tried using the ctx.clearRect method and that didn't work as well.我还应该提到我曾尝试使用 ctx.clearRect 方法，但效果不佳。 My end goal is trying to use Canvas/JavaScript to move the circle from the original coordinate to a new coordinate via the buttons.我的最终目标是尝试使用 Canvas/JavaScript 通过按钮将圆从原始坐标移动到新坐标。

Answer 1

You can achieve this with the following code:您可以使用以下代码实现此目的：

 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>

在通过 JavaScript 的 Canvas 中，如何获取对象的坐标，然后将该对象移动到不同的坐标？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-02-28 11:36:37

在通过 JavaScript 的 Canvas 中，如何获取对象的坐标，然后将该对象移动到不同的坐标？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-02-28 11:36:37

解决方案1
1 已采纳 2019-02-28 11:36:37