我试图通过按“上”,“下”,“左”,“右”来移动圆,“重置”是使圆回到中心。以下是到目前为止的内容。由于我是新手,因此非常感谢您对改进我的代码的任何反馈。
<!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通过按钮将圆从原始坐标移动到新坐标。
答案 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>