通过JavaScript在Canvas中,如何获取对象的坐标,然后将该对象移动到其他坐标?

时间:2019-02-28 10:00:56

标签: javascript html canvas

我试图通过按“上”,“下”,“左”,“右”来移动圆,“重置”是使圆回到中心。以下是到目前为止的内容。由于我是新手,因此非常感谢您对改进我的代码的任何反馈。

<!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方法,但效果也不佳。我的最终目标是尝试使用Canvas / JavaScript通过按钮将圆从原始坐标移动到新坐标。

1 个答案:

答案 0 :(得分:1)

您可以使用以下代码来实现:

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>