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

HTML5 canvas how to draw one picture on top of another

本文关键字：一张 绘制 HTML5 布如何      更新时间：2024-02-02

我想在同一个画布上绘制两个图像。第一个图像是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是回调，所以我不能对调用顺序做出任何假设。谢谢

将图像存储在数组中。这将确保无论哪个图像首先完成加载，都能保持订单：

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处——当然，更改此值以满足您的标准）。

前台可以在后台的回调中加载

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";
相关文章：