在 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中文网其他相关文章！
