我想从网络上绘制图片，所以我有以下html5代码，这是W3C Shool的示例，但是当我在Chrome中加载html页面时，图像被显示了。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src='http://www.w3school.com.cn/i/ct_html5_canvas_image.gif';
cxt.drawImage(img, 0, 0);
</script>
</body>
</html>
该图片来自w3school，我可以在我的Chrome中查看它，我的Chrome是最新版本，所以我不知道问题出在哪里，我什至尝试将图片下载到我的本地机器并将其放在在上面html页面的同一目录下，将代码改为img.src='flower.gif'，但还是不行。
最佳答案
问题是您试图在加载图像之前绘制图像。尝试这样的事情:
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var img=new Image();
img.src='http://www.w3school.com.cn/i/ct_html5_canvas_image.gif';
img.onload = draw;
function draw(){
cxt.drawImage(img, 0, 0);
}
</script>
关于javascript - canvas、drawImage不适用于远程图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13509148/