嗨，我看你已经能熟练用Canvas绘制图片了，现在想实现刷新页面就随机切换Canvas里的爱心图片对吧？其实思路和你找到的背景图随机切换逻辑是相通的，只是把操作对象从页面背景改成Canvas的绘制流程就行啦，我给你调整下代码，一步步讲清楚：

核心思路拆解 #

• 第一步：先把你想随机切换的所有爱心图片地址整理成一个数组，就像你存背景图的数组那样；
• 第二步：用Math.floor(Math.random() * 数组长度)生成随机索引，从数组里挑出一张随机的图片；
• 第三步：等这张随机图片加载完成后，再绘制到Canvas上（这步很重要！因为图片加载是异步的，不等加载完就画会显示不出来）。

修改后的完整代码 #

JavaScript 部分

var myCanvas = document.getElementById("canvas1");
var myContext = myCanvas.getContext("2d");

// 第一步：把你要用到的爱心图片地址都放进这个数组里
const heartImages = [
  "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/160px-Heart_coraz%C3%B3n.svg.png",
  // 这里可以继续加其他爱心图片的地址哦
  "https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Red_Heart.svg/1200px-Red_Heart.svg.png",
  "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Heart_%28black%29.svg/1200px-Heart_%28black%29.svg.png"
];

// 封装一个随机绘制爱心的函数
function drawRandomHeart() {
  // 第二步：生成随机索引，选一张图片
  const randomIndex = Math.floor(Math.random() * heartImages.length);
  const randomHeart = new Image();
  randomHeart.src = heartImages[randomIndex];
  
  // 第三步：等图片加载完成再绘制
  randomHeart.onload = function() {
    // 先清空Canvas（可选，如果之前有其他内容需要清除的话）
    myContext.clearRect(0, 0, myCanvas.width, myCanvas.height);
    // 绘制随机选中的爱心，位置还是你原来的50,50
    myContext.drawImage(randomHeart, 50, 50);
  }
}

// 页面加载完成后就执行随机绘制
window.onload = drawRandomHeart;

HTML 部分

<canvas id="canvas1" width="1000" height="900" style="border: dotted 3px #001219;background-color:#E9D8A6;">Your browser does not support canvas</canvas>

额外小提示 #

• 如果你的图片尺寸不一样，还可以在drawImage里加宽度和高度参数，比如myContext.drawImage(randomHeart, 50, 50, 160, 160)，这样能统一所有爱心的大小；
• 要是想点击按钮切换图片，只需要把drawRandomHeart函数绑定到按钮的click事件上就行啦，比如给按钮加onclick="drawRandomHeart()"。

备注：内容来源于stack exchange，提问作者Ale