正如标题所述,我试图将一系列图像放入一个数组中,然后将它们绘制到 HTML5 的 Canvas 上,我没有收到任何错误,但没有显示任何内容。我是 HTML5 新手,所以遇到了一些麻烦。
这是我所拥有的:
var canvas = document.querySelector('Canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
function drawImagesToCanvas() {
var imageArray = new Array();
imageArray[0] = "graphics/1.png";
imageArray[1] = "graphics/2.png";
imageArray[2] = "graphics/3.png";
imageArray[3] = "graphics/4.png";
imageArray[4] = "graphics/5.png";
imageArray[5] = "graphics/6.png";
imageArray[6] = "graphics/7.png";
imageArray[7] = "graphics/8.png";
imageArray[8] = "graphics/9.png";
imageArray[9] = "graphics/10.png";
ctx.drawImage(imageArray[0], 120, 280, 220, 150);
}
我认为这可能是文件路径,但我尝试了多种变体。
最佳答案
您不向drawImage提供源URL;它想要图像本身。这可以从 DOM 元素或通过在代码中构造 Image 对象来读取,如下所示:
var canvas = document.querySelector('Canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
function drawImagesToCanvas() {
var imageArray = new Array();
imageArray[0] = "https://placehold.it/220x150";
// ...
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 20, 80, 220, 150);
};
img.src = imageArray[0];
}
drawImagesToCanvas();
<canvas></canvas>
关于javascript - 在 HTML5 中将图像数组显示到 Canvas 的最佳方式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49239352/