我试图通过按“上”“下”“左”“右”来移动圆圈，“重置”是将圆圈带回中心。以下是我到目前为止所拥有的。由于我是新手，任何有关改进我的代码的反馈都将不胜感激。
<!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 通过按钮将圆从原始坐标移动到新坐标。
最佳答案
您可以使用以下代码实现此目的:
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 - 在通过 JavaScript 的 Canvas 中，如何获取对象的坐标，然后将该对象移动到不同的坐标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54922934/