在html5 canvas上绘制多张图片时，由于每次设置`canvas.width`或`canvas.height`都会清除画布内容，导致后续图片覆盖之前绘制的图片。本文将深入探讨这一常见问题，并提供两种高效解决方案：通过单次初始化canvas尺寸，或等待所有图片加载完毕后统一绘制，确保多张图片以其原始分辨率被正确叠加显示，从而避免内容丢失。
理解问题根源：Canvas尺寸设置与上下文清除
在使用HTML5 Canvas进行图形绘制时，一个常见的陷阱是当尝试将多张图片叠加到同一画布上时，发现只有最后一张图片能够显示，而之前的图片似乎被“擦除”了。这通常是由于对Canvas元素的width或height属性的重复赋值引起的。
在JavaScript中，当您通过canvas.width = someValue或canvas.height = someValue来改变Canvas的尺寸时，浏览器会自动清除Canvas的绘图上下文（context）。这意味着之前绘制的所有内容都会被清空。在异步加载图片的场景中，如果每张图片的onload事件处理函数都包含了设置Canvas尺寸的逻辑，那么每当一张图片加载完成并尝试绘制时，它都会先清空画布，然后只绘制自己，从而造成“覆盖”的假象。
为了解决这个问题，关键在于避免不必要的Canvas尺寸重置，并确保所有图片都能在Canvas被正确初始化后，被绘制到同一个上下文上。我们将介绍两种主要的解决方案。
方案一：单次初始化Canvas尺寸
如果您的多张图片尺寸相同，或者您希望Canvas的尺寸由第一张加载完成的图片决定，那么可以在第一张图片加载时初始化Canvas的尺寸，之后只进行绘制操作，不再修改Canvas的尺寸。
立即学习“前端免费学习笔记（深入）”；
核心思想： 使用一个标志位 (didInit) 来确保 canvas.width 和 canvas.height 只被设置一次。
示例代码
HTML结构:
@@##@@ @@##@@
JavaScript逻辑:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var didInit = false; // 标志位，确保Canvas尺寸只初始化一次
function initCanvasDimensions(img) {
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
didInit = true; // 设置标志位为true
}
img1.onload = function(){
if (!didInit) { // 如果尚未初始化
initCanvasDimensions(img1);
}
ctx.drawImage(img1, 0, 0); // 绘制第一张图片
};
img2.onload = function(){
if (!didInit) { // 如果尚未初始化
initCanvasDimensions(img2);
}
ctx.drawImage(img2, 0, 0); // 绘制第二张图片
};CSS样式 (可选，用于隐藏原始图片和显示Canvas边框):
canvas {
display: block;
border: 1px solid lime;
}
img {
visibility: hidden; /* 隐藏原始的@@##@@标签 */
}说明： 此方法假设所有图片要么尺寸相同，要么您不介意Canvas尺寸由第一张加载完成的图片决定。如果图片尺寸不一致，且您希望所有图片都能完整显示，则需要考虑方案二。
方案二：预加载所有图片并统一绘制
当您需要绘制多张尺寸可能不同的图片，并希望Canvas能够容纳所有图片的最大尺寸时，最佳实践是等待所有图片都加载完成后，再统一计算Canvas的尺寸并进行绘制。
核心思想：
- 收集所有需要绘制的
元素。 - 为每个
元素绑定onload事件，并在事件中记录已加载的图片。 - 当所有图片都加载完毕后，遍历这些图片，找出它们中的最大宽度 (naturalWidth) 和最大高度 (naturalHeight)。
- 根据计算出的最大尺寸，一次性设置Canvas的width和height。
- 最后，将所有已加载的图片绘制到Canvas上。
示例代码
HTML结构:
@@##@@ @@##@@
JavaScript逻辑:
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const loadedImages = []; // 用于存储已加载的图片对象
const drawImagesToCanvas = () => {
let maxW = 0;
let maxH = 0;
// 遍历所有已加载图片，找出最大宽度和高度
for (const img of loadedImages) {
maxW = Math.max(maxW, img.naturalWidth);
maxH = Math.max(maxH, img.naturalHeight);
}
// 一次性设置Canvas的尺寸，避免清除上下文
canvas.width = maxW;
canvas.height = maxH;
// 绘制所有图片
for (const img of loadedImages) {
ctx.drawImage(img, 0, 0); // 假设从(0,0)开始绘制，可根据需求调整坐标
}
};
// 监听所有@@##@@元素的加载事件
document
.querySelectorAll("img") // 选择页面上所有的@@##@@标签
.forEach((img, idx, all) => {
img.onload = () => { // 为每个图片设置加载完成事件
loadedImages.push(img); // 将加载完成的图片添加到数组中
// 如果所有图片都已加载完成
if (loadedImages.length === all.length) {
drawImagesToCanvas(); // 执行统一绘制操作
}
};
// 确保图片即使在缓存中也能触发onload事件
if (img.complete) {
img.onload();
}
});CSS样式 (可选，用于隐藏原始图片和显示Canvas边框):
canvas {
display: block;
border: 1px solid lime;
}
img {
visibility: hidden; /* 隐藏原始的@@##@@标签 */
}说明： 此方法更加健壮，适用于图片尺寸不一致的场景。它确保Canvas被正确初始化为足以容纳所有图片的最大尺寸，并且所有绘制操作都在Canvas尺寸确定后进行，从而避免了内容被清除的问题。
注意事项
- 图片加载的异步性： onload事件是异步触发的，因此不能假定图片会按HTML中出现的顺序加载完成。两种方案都考虑了这一点。
- naturalWidth和naturalHeight： 这两个属性在图片加载完成后才能获取到图片的原始宽度和高度，是保持图片分辨率的关键。
- Canvas的CSS样式： Canvas的CSS width和height属性只影响其在页面上的显示尺寸，并不会改变其内部绘图表面的分辨率。要保持图片清晰，应通过JavaScript设置canvas.width和canvas.height，使其等于或大于所绘制图片的原始尺寸。
-
隐藏原始
标签： 为了避免页面上同时显示原始图片和Canvas上的图片，通常会通过CSS将原始的
标签隐藏起来（例如 visibility: hidden; 或 display: none;）。
- 错误处理： 在实际应用中，应考虑为图片加载添加错误处理机制（例如img.onerror），以应对图片加载失败的情况。
总结
在HTML5 Canvas上绘制多张图片而不丢失分辨率的核心在于精细化管理Canvas的尺寸设置时机。通过避免在每次绘制前都重置Canvas尺寸，我们可以确保所有图片都能被正确叠加。根据您的具体需求，选择“单次初始化Canvas尺寸”或“预加载所有图片并统一绘制”这两种策略，都能有效解决图片覆盖问题，并以最佳视觉效果呈现您的多图Canvas内容。
