Pon*_*are 4 javascript canvas drawimage
我只是想弄清楚如何在画布上绘制图像。我遵循了有关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>
小智 6
在使用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', ...）更加“安全” 。