Почему при включении веб-страницы нет изображений дроу? - PullRequest
Новая
       23

Почему при включении веб-страницы нет изображений дроу?

1 голос
/ 08 мая 2019

Я хочу рисовать изображения на веб-странице из массива, но на сайте нет изображений. Существует массив из 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);
}

Ответы [ 3 ]

0 голосов
/ 08 мая 2019

Кажется, вы не ждете загрузки изображений перед их рисованием.

Попробуйте нарисовать в 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

0 голосов
/ 08 мая 2019

Вы забыли связать 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>
0 голосов
/ 08 мая 2019

Это потому, что вы пытаетесь нарисовать изображения на холсте, используя drawImage (), не убедившись, что они закончили загрузку. Сначала создайте временную переменную, которая будет ссылаться на изображение, которое вы хотите нарисовать 

var image = new Image();

Во-вторых, назначьте ему прослушиватель событий, который будет следить за загрузкой изображения, и функцию обратного вызова, которая фактически будет рисовать изображение. 

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

Наконец, измените свойство src временного изображения на желаемое изображение, чтобы начать загрузку 

image.src=images[0].src;
...