javascript坐标移动[重复]答案

【问题标题】：javascript coordinate movement [duplicate]javascript坐标移动[重复]
【发布时间】：2021-01-27 04:27:57
【问题描述】：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <button id='btn'>CLICK ME</button>
    <canvas id="canvas" width="1000" height="400">
      

    </canvas>
    <script src="script.js"></script>
  </body>
</html>

let x = 50;
let y = 50;

let c = document.getElementById('canvas');
let ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(x,y,40,0,2 * Math.PI);
ctx.stroke();

let button = document.getElementById('btn');
button.onclick = function(event) {
  if(event.which == 1) {
    x += 5;
    console.log(x);
  }
}

我创建了一个圈子CTX，我希望它在单击按钮时移动，但是当我单击它时没有任何反应，所以我尝试登录控制台，如果我单击按钮时X 变量正在发生变化并且它正在改变，但圆圈仍然不会移动。有什么问题吗？有没有其他方法可以让圆圈移动？

【问题讨论】：

永远不会重新绘制画布
@evolutionxbox 谢谢

标签： javascript html dom events

【解决方案1】：

您没有使用新数据重绘画布，您应该创建一个主函数并每秒更新 x 次，或者在您更改内容时更新它。

let x = 50;
let y = 50;

let c = document.getElementById('canvas');
let ctx = c.getContext("2d");
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(x,y,40,0,2 * Math.PI);
  ctx.stroke();
}
draw()

let button = document.getElementById('btn');
button.onclick = function(event) {
  if(event.which == 1) {
    x += 5;
    draw()
    console.log(x);
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <button id='btn'>CLICK ME</button>
    <canvas id="canvas" width="1000" height="400">
      

    </canvas>
    <script src="script.js"></script>
  </body>
</html>

【讨论】：