尽管我的代码看起来正确，但为什么我的图像没有出现在 HTML5 画布上？

在 HTML5 Canvas 上绘制图像

您正在尝试将图像添加到画布，但它仍然难以捉摸。让我们揭开这一难以捉摸的努力背后的秘密。

您的代码看起来不错，所以问题一定出在其他地方。您缺少的关键步骤是确保在尝试绘制图像之前加载图像。

这是修改后的解决方案：

<code class="html"><canvas id="viewport"></canvas></code>

<code class="css">canvas#viewport { border: 1px solid white; width: 900px; }</code>

<code class="javascript">var canvas = document.getElementById('viewport'),
    context = canvas.getContext('2d');

function make_base() {
  var base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0);
  };
}

make_base();</code>

通过添加 onload 事件侦听图像，您可以延迟绘制直到图像完全加载，从而保证其出现在画布上。

以上是尽管我的代码看起来正确，但为什么我的图像没有出现在 HTML5 画布上？的详细内容。更多信息请关注PHP中文网其他相关文章！