HTML5画布如何在一张图片上面绘制另一张图片

Question

我想在同一个画布上绘制两幅图像。第一幅图是background.jpg，第二幅是photo.jpg。我希望photo.jpg永远在其他图像上面：

var ctx = document.getElementById("main").getContext("2d");
var background = new Image();
var photo = new Image();

background.onload = function() {    
  ctx.drawImage(background, 0, 0);  
}

photo.onload = function() {
  ctx.drawImage(photo, 0, 0);  
}

background.src = "background.jpg";
photo.src = "photo.jpg"

我的问题是如何确保照片始终在顶部。由于onload是回调函数，所以我无法做出任何调用顺序的假设。谢谢！

- darklord

Answer 1

将您的图片存储在数组中。这将确保无论哪张图片先加载完，顺序都会保持不变:

var ctx = document.getElementById("main").getContext("2d");
var background = new Image();
var photo = new Image();
var images = [background, photo]; /// the key
var count = images.length;

background.onload = photo.onload = counter;
background.src = "background.jpg";
photo.src = "photo.jpg"

/// common loader keeping track if loads
function counter() {
    count--;
    if (count === 0) drawImages();
}

/// is called when all images are loaded
function drawImages() {
    for(i = 0; i < images.length; i++)
        ctx.drawImage(images[i], 0, 0);
}

(绘图方法假设所有元素都在0,0位置绘制 - 当然，根据您的要求更改此位置）。

- user1693593

Answer 2

前景可以在后台回调中加载。

var ctx = document.getElementById("main").getContext("2d");
var background = new Image();
var photo = new Image();

background.onload = function() {    
  ctx.drawImage(background, 0, 0);
  photo.src = "photo.jpg" // after background is loaded, load foreground
}

photo.onload = function() {
  ctx.drawImage(photo, 0, 0);  
}

background.src = "background.jpg";

- timetocode