如何使用 ctx.drawImage 将数组中的随机图像推送到 canvas？

Question

我想要一个 canvas 每次 window 刷新时随机显示不同的动物头像。因此，我试图将随机图像从我的头部阵列推送到我的 canvas。正如您在下面看到的，这是我的数组。

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] 并将其附加到 body。

 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>

如何使用 ctx.drawImage 将数组中的随机图像推送到 canvas？

How do I push random images from an array onto a canvas using ctx.drawImage?

javascript

arrays

random

drawimage

html5-canvas