Как поместить sh случайные изображения из массива на холст с помощью ctx.drawImage? - PullRequest
Новая
       44

Как поместить sh случайные изображения из массива на холст с помощью ctx.drawImage?

0 голосов
/ 29 марта 2020

Я хочу иметь холст, на котором в случайном порядке каждый раз при обновлении окна отображается различная голова животного. Таким образом, я пытаюсь нанести случайное изображение из массива моей головы на холст. Как вы можете видеть ниже, это мой массив. 

var heads = ['animals/dog.svg', 'animals/fish.svg', 'animals/monkey.svg'];`

А вот функция рисования изображения, которую я хочу, чтобы массив случайным образом выводил на sh изображение: 

ctx.drawImage(img, 60, 50);

Вот весь мой код для контекста: 

var heads = ['animals/dog.svg', 'animals/fish.svg', 'animals/monkey.svg'];

function gethead() { 
var number = Math.floor(Math.random()*heads.length);
document.write('<img src="'+heads[number]+'" />');}

window.onload = function () {
  var img = new Image();
  img.src = 'dog.svg';


  img.onload = function () {
      // CREATE CANVAS CONTEXT.
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 60, 50); 
      // DRAW THE IMAGE TO THE CANVAS.
   }
}

Может кто-нибудь объяснить, как я могу сделать эту работу?

1 Ответ

0 голосов
/ 29 марта 2020

Создайте элемент img и задайте для sr c заголовки [generatenumber] и добавьте его к телу. 

 var img=document.createElement('img');
 img.src=heads[number];
 document.body.append(img);

Используя ту же переменную img, которая имеет отношение к изображению, напишите функцию для обратного вызова onload 

img.onload = function () { }

и в drawImage передайте переменную, содержащую ссылку на изображение, т.е. img

document.getElementById('canvas').getContext('2d').drawImage(img, 0,0);

Попробуйте запустить этот фрагмент 

var heads = ['https://cdn.pixabay.com/photo/2015/02/04/08/03/baby-623417__340.jpg', 'https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028__340.jpg', 'https://cdn.pixabay.com/photo/2016/04/14/08/40/newborn-1328454__340.jpg']; 
window.onload = function () {
     let number = Math.floor(Math.random()*heads.length); 
     var img=document.createElement('img');
     img.src=heads[number];
     document.body.append(img);
      img.onload = function () {       document.getElementById('canvas').getContext('2d').drawImage(img, 0,0); 
      //remove the image after drawing
      img.style.display="none"
         
      }    
}
<canvas id="canvas"></canvas>
...