为什么打开网页没有图像？

Question

我想从数组中绘制网页上的图片，但是网站上没有图片。我想在网站上显示 6 张图片，我也想让它们向上移动，我想在 x 轴上随机出现它们，但是网站上没有图片

var canvas = document.getElementById('canvas');
var c = canvas.getContext("2d"); 

var description = [ "cerveny", "fialovy", "cierny", "zeleny", "modry", "zlty"];

var pictures = new Array(5);

function initialize(){
    pictures[0] = new Image(50, 50);
    pictures[0].src = "cerveny_novy.png";
    pictures[1] = new Image(50,50);
    pictures[1].src = "fialovy_novy.png";
    pictures[2] = new Image(50,50);
    pictures[2].src = "cierny.png";
    pictures[3] = new Image(50,50);
    pictures[3].src = "zeleny_novy.png";
    pictures[4] = new Image(50,50);
    pictures[4].src = "modry_novy.png";
    pictures[5] = new Image(50,50);
    pictures[5].src = "novy_zlty.png";
}

initialize();

for (var i = 0; i < 6; i++)
{
    c.drawImage(pictures[i], 50, 400, 600, 200);
}

Answer 1

那是因为您尝试使用 drawImage() 将图像绘制到 canvas 上，但未确保这些图像已完成加载。首先创建一个临时变量，它将引用您要绘制的图像

var image = new Image();

其次为其分配一个事件侦听器，它将监视图像的加载和实际绘制图像的回调函数。

image.onload = function() {
  c.drawImage(image, 100, 100);
}

最后把临时图片的src属性改成想要的图片开始加载

image.src=images[0].src;

Answer 2

您似乎没有在绘制之前等待图像加载。

尝试在 onLoad 中绘图：

pictures[i].onload = function(){ 
  c.drawImage(pictures[i], 50, 50);
};
pictures[i].src = "novy_zlty.png";

您可能想要创建一个绘图函数并在加载图片数组的每个元素时调用它。

见https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

Answer 3

您忘记绑定 onload 处理程序

var c = canvas.getContext("2d");  

var description = new Array ("cerveny", "fialovy", "cierny", "zeleny", "modry", "zlty");

var img=[
  "https://picsum.photos/id/231/50/50",
  "https://picsum.photos/id/232/50/50",
  "https://picsum.photos/id/233/50/50",
  "https://picsum.photos/id/234/50/50",
  "https://picsum.photos/id/235/50/50",
  "https://picsum.photos/id/237/50/50",
]

function initialize(){
  return img.map(p=>new Image(50, 50)).map((p,i)=>{
    p.src = img[i];
    p.onload = () => c.drawImage(p, Math.random()*200, 20*i, 50, 50);
    return p;
  });
  
}

var pictures= initialize();

<canvas id="canvas" width=250 height=150></canvas>

为什么打开网页没有图像？

Why there is no images drow when I turn on web page?

javascript

arrays

image

draw