如何在Canvas指定X/Y坐标显示特定图片并定时随机更换位置？

你的现有代码思路不对——重写原生drawImage方法来检测图片，既实现不了「指定坐标显示图片+定时随机换位置」的需求，还可能破坏Canvas原有绘制逻辑，alert弹窗更是会阻塞程序运行，完全不可取。

下面是直接实现需求的代码方案：

// 获取Canvas元素和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 配置参数
const imgUrl = 'https://agma.io/skins/objects/9.png?v=2'; // 目标图片URL
const imgWidth = 50; // 图片显示宽度
const imgHeight = 50; // 图片显示高度
const intervalTime = 2000; // 位置切换间隔（毫秒）

// 创建图片对象
const img = new Image();
img.src = imgUrl;

// 初始化图片位置
let x = 100; // 初始X坐标
let y = 100; // 初始Y坐标

// 定时更新随机位置
setInterval(() => {
  // 随机生成Canvas范围内的坐标（避免图片超出画布）
  x = Math.random() * (canvas.width - imgWidth);
  y = Math.random() * (canvas.height - imgHeight);
}, intervalTime);

// 循环绘制图片
function draw() {
  // 先清空画布（如果需要保留其他绘制内容可去掉这步）
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 图片加载完成后绘制
  if (img.complete) {
    ctx.drawImage(img, x, y, imgWidth, imgHeight);
  }
  
  // 请求下一帧继续绘制
  requestAnimationFrame(draw);
}

// 启动绘制
draw();

关键说明： #

• 直接创建图片对象，避免篡改原生方法，保证Canvas原有逻辑不受影响
• 用setInterval定时更新随机坐标，范围限制在画布内防止图片超出
• 用requestAnimationFrame实现流畅的循环绘制，确保图片位置更新后能及时渲染
• 加入图片加载状态判断，避免图片未加载完成时调用drawImage报错

内容的提问来源于stack exchange，提问作者Police Nguyễn