如何使用ctx.drawImage将随机图像从数组推到画布上？

Question

我想让画布在每次刷新窗口时随机显示不同的动物头部。因此，我试图将随机图像从头部阵列推到画布上。如您在下面看到的，这是我的数组。

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

这是绘制图像函数，我希望数组将图像随机推送到：

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.
   }
}

任何人都可以解释我如何进行这项工作吗？

Answer 1

创建一个img元素并将src设置为heads [generatednumber]并将其附加到正文。

 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>