HTML5 Canvas drawImage 仅在第二次刷新后绘制

// 假设 canvas 元素 id 为 "myCanvas"
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 绘制背景颜色
ctx.fillStyle = "rgba(200, 100, 100, 1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制图像
const image = new Image();
image.src = "path/to/your/image.png";
image.onload = function() {
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
};

// 刷新画布
ctx.draw();

// 假设 canvas 元素 id 为 "myCanvas"
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 绘制背景颜色
ctx.fillStyle = "rgba(200, 100, 100, 1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制图像
const image = new Image();
image.src = "path/to/your/image.png";
image.onload = function() {
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  // 刷新页面以查看最新的绘制效果
  window.location.reload();
};