如何点击时停止update函数运行并在Canvas上绘制点？

嘿，咱们来一步步搞定你的问题！你现在遇到的核心是事件绑定的逻辑理解偏差，还有Canvas动画循环的控制没到位，先从你的简化示例说起，因为这是根源问题：

一、简化示例的错误修正 #

你之前的代码里，clicked = test();这行是直接调用了test()函数，把它的返回值赋值给clicked，所以不管你点没点击元素，clicked都会立刻变成true。正确的做法是：只把函数作为事件处理函数绑定，在函数内部去修改clicked变量，而不是直接执行函数赋值。

修改后的代码：

var clicked = false; 
console.log(clicked); 

function test () { 
  clicked = true; // 在事件触发时才修改变量
  console.log("点击了！clicked现在是：", clicked);
} 

// 只绑定函数，不要加()，加()会立即执行
document.getElementsByTagName("h1")[0].addEventListener("mousedown", test); 

二、Canvas功能的完整修复 #

回到你的Canvas需求：点击时停止update动画，然后在点击位置绘制点。你的原有代码有三个关键问题：

1. update函数的循环没有终止条件，会一直递归调用自己；
2. putPoint函数里没有修改clicked变量，所以update不会停止；
3. 鼠标位置的计算可以更精准。

下面是修改后的完整代码：

JavaScript代码 #

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
var radius = 2; 
var mouseX = 0; 
var mouseY = 0; 
var clicked = false; 
var animationId; // 存储动画ID，用于彻底停止动画

function update() { 
  // 如果已经点击，直接终止循环
  if (clicked) return;
  
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
  ctx.beginPath(); 
  ctx.arc(mouseX, mouseY, radius, 0, 2 * Math.PI, true); 
  ctx.fill(); 
  // 存储动画ID，方便后续取消
  animationId = requestAnimationFrame(update); 
} 

canvas.addEventListener("mousemove", setMousePosition, false); 
function setMousePosition(e) { 
  // 用offsetX/offsetY获取相对于Canvas的坐标，更准确
  mouseX = e.offsetX; 
  mouseY = e.offsetY; 
} 

// 启动动画
if (!clicked) {
  animationId = requestAnimationFrame(update);
}

function putPoint(e) { 
  clicked = true; // 标记已点击，终止update循环
  cancelAnimationFrame(animationId); // 彻底取消动画请求
  
  // 在点击位置绘制点
  ctx.beginPath(); 
  ctx.arc(e.offsetX, e.offsetY, radius, 0, Math.PI * 2); 
  ctx.fill(); 
} 

canvas.addEventListener("mousedown", putPoint); 

// 如果你需要计算Canvas在页面中的绝对位置，这个函数可以保留
function getPosition(el) { 
  var xPosition = 0; 
  var yPosition = 0; 
  while (el) { 
    xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft); 
    yPosition += (el.offsetTop - el.scrollTop + el.clientTop); 
    el = el.offsetParent; 
  } 
  return { x: xPosition, y: yPosition }; 
}

HTML代码 #

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000;"></canvas>

关键修改说明 #

• 动画终止控制：新增animationId存储requestAnimationFrame的返回值，用cancelAnimationFrame彻底停止动画，同时在update开头判断clicked状态，双重保障动画停止；
• 点击事件逻辑：在putPoint里先设置clicked = true，再取消动画，最后绘制点击点；
• 鼠标坐标优化：用e.offsetX和e.offsetY直接获取相对于Canvas的坐标，避免了复杂的位置计算，更精准。

核心要点总结 #

• 事件绑定时，不要加括号调用函数（比如test()），只传递函数名，让浏览器在事件触发时自动调用；
• 循环动画必须设置明确的终止条件，要么在循环内部判断状态，要么用cancelAnimationFrame主动取消；
• 修改变量的逻辑要放在事件处理函数内部，而不是直接赋值函数的返回值。

内容的提问来源于stack exchange，提问作者chree