Javascript 我在HTML画布中显示URL中的图像时遇到问题
据我所知，我的代码与W3上的代码完全相同，只是我制作了一个新图像，而不是使用html中已有的图像，但我无法让它显示任何内容Javascript 我在HTML画布中显示URL中的图像时遇到问题,javascript,html,canvas,Javascript,Html,Canvas,据我所知，我的代码与W3上的代码完全相同，只是我制作了一个新图像，而不是使用html中已有的图像，但我无法让它显示任何内容 <body> <center><canvas id="myCanvas" width="1000" height="750"></canvas></center> <script> function newImage(src, width, height) { var i
<body>
<center><canvas id="myCanvas" width="1000" height="750"></canvas></center>
<script>
function newImage(src, width, height) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
return img;
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = newImage("http://i.imgur.com/ELsS4mN.jpg", 1000, 750);
ctx.drawImage(i,0,0);
</script>
函数newImage（src、宽度、高度）{
var img=document.createElement（“img”）；
img.src=src；
img.width=宽度；
img.height=高度；
返回img；
}
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
变量i=newImage（“http://i.imgur.com/ELsS4mN.jpg", 1000, 750);
ctx.drawImage（i，0,0）；
出现此问题是因为您在图像对象完全下载之前返回了它。因为画布无法将图像数据渲染为背景图像 只有在图像数据完全可用时，才应使用
onloaddrawImagefunction newImage(src, width, height, callback) {
var img = new Image();
img.width = width;
img.height = height;
img.onload = function () {
callback(img);
};
img.src = src;
}
var c = document.getElementById("myCanvas"),
ctx = c.getContext("2d");
newImage("http://i.imgur.com/ELsS4mN.jpg", 1000, 750, function(image) {
ctx.drawImage(image, 0, 0);
});
newImage