4

我只是想弄清楚如何在画布上绘制图像。我遵循了关于 W3 学校的教程，但是当我自己尝试时，它似乎不起作用。我将下面的代码复制并粘贴到 HTML 文件中，并且图像永远不会加载到画布中。我将图片下载到同一目录中。我一直在四处询问，并在网上查看，但似乎没有人知道问题是什么。我正在使用 chrome 的更新版本（版本 29.0.1547.76 m）。

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">

<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
this.ctx.drawImage(img,10,10);

</script>

</body>
</html>
4

3 回答 3

10

在您使用 drawImage 时，您的图像可能尚未完成加载：

HTML

在 img 标签中添加 onload 处理程序：

<img id="scream" onload="draw()" src="...

然后处理它的函数：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");

function draw() {
    ctx.drawImage(img,10,10);
}

在线演示在这里

请注意，将脚本放在文档中的位置也很重要。

我也建议您src在 JavaScript 中设置属性。这使得处理onload（或使用 订阅的事件img.addEventListener('load', ...）更加“安全”。

于 2013-09-27T22:07:51.050 回答
3

您应该使用以下方法，首先让图像加载然后显示：

image.onload = function() {
    pic.getContext('2d').drawImage('your image to display', 0,0);
}
于 2014-04-07T13:37:21.290 回答
0

“如果您尝试在图像完成加载之前调用 drawImage()，它不会做任何事情（或者，在旧浏览器中，甚至可能会引发异常）。所以您需要确保使用 load 事件，这样您就不会在图像加载之前不要尝试这个。”

例子：

var img = new Image();   // Create new img element
img.addEventListener('load', function() {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

资源

于 2019-09-13T18:49:08.610 回答