用图像替换画布上的矩形答案

【问题标题】：Replace Rectangle on Canvas with Image用图像替换画布上的矩形
【发布时间】：2020-09-22 13:48:37
【问题描述】：

我正在使用 HTML Canvas 和 JavaScript 构建一个简单的视频游戏。我正在尝试用草莓图像替换黑色方块，但图像未显示在画布上。如何让图像替换正方形？

this.draw = function() {
  var img = new Image();
  img.src = "strawberry.png";
  ctx.drawImage(img, 10, 10);
  ctx.fillStyle = "black";
  ctx.fillRect(this.x, this.y, 10, 10);   
}

【问题讨论】：

变量是“image”，但您正在尝试绘制“img”
谢谢。我更正了变量，但代码仍然无法正常工作。错误是“drawImage 不是函数。”
我看不到你的代码的顶部，但需要有一些东西来定义 ctx 变量。类似于： var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d");之后，ctx 应该允许 drawImage 函数
@ATD 再次感谢您，图像尚未显示，但我不再看到错误。

标签： javascript html css canvas

【解决方案1】：

问题是在调用代码时图像可能尚未加载。你需要等待它发生。

试试：

function loadimage() {
  var c = document.getElementById("myCanvas"); 
  var ctx = c.getContext("2d"); 
  var img = new Image();
  img.src = "strawberry.png";
  img.onload = function() {
    ctx.drawImage(img, 0, 0, c.width, c.height);
  }
}

window.onload = loadimage;

我已将此代码的一个版本（我的测试使用不同的图像文件名）放入页面 HEAD 部分的 SCRIPT 标记中。代码在页面完成加载后运行，但代码本身在实际绘制图像之前等待触发 img.onload 事件。并且，将“myCanvas”更改为您的画布标签的 ID。

【讨论】：

这解决了我的问题，图像现在显示在画布上。谢谢！
np。我故意省略了有关矩形的部分，我不确定这个要求是什么。我希望您现在可以将其重新添加到代码中以获得您需要的内容？
矩形是一个临时占位符，因此我可以看到图像应该显示的位置，并且项目不需要它。您的回答完美解决了问题！再次感谢您！
啊，好的。我通常通过在 HTML 元素上放置不同颜色的边框来做类似的事情 - 我想这是同一类事情！