在 HTML5 Canvas 中使用 drawImage 繪製多張圖片時，確保載入完成與正確疊加
在 HTML5 的 Canvas 元素中使用 drawImage() 方法繪製圖片時，若有多張圖片需依序疊加顯示，確保每張圖片都已完整載入至記憶體是極為重要的。若在圖片尚未載入完成時就嘗試繪製，drawImage() 將無法正確顯示圖片，導致畫面缺失。
本文範例示範如何透過 Image 物件的 onload 事件處理機制，確保兩張圖片載入完成後再繪製，並正確疊加其圖層順序。
範例說明：
假設要繪製兩張圖片：
t1.png：儲存在雲端。
t2.png：與 HTML 檔案位於同一目錄（本地）。
範例程式碼：
<body>
<canvas id="canvas_a" width="300" height="300" style="border: 1px solid"></canvas>
<script>
const canvas = document.getElementById("canvas_a");
canvas.style.position = "absolute";
const ctx = canvas.getContext("2d");
const test1 = new Image(); // 第一張圖片（雲端）
const test2 = new Image(); // 第二張圖片（本地）
test1.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMkzrhtoGf0Tml7POi9w7s9oSt4teDe0S4nxpMLmT5qXh8MQi136-lEBWQRQvoPkTvj_ta4KPy2U9GDvVm1zL-IHIzivSnf7xsJ0DcLQJUMUDkAOzTwXk6_b5-J3uM56zySXGJoEmQrMw/s1600/t1.png";
test2.src = "t2.png";
// 圖片載入追蹤邏輯
let imagesLoaded = 0;
const totalImages = 2;
const imageLoadedHandler = () => {
imagesLoaded++;
if (imagesLoaded === totalImages) {
// 所有圖片載入完成後，按順序繪製
ctx.drawImage(test1, 0, 0); // test1 為底層
ctx.drawImage(test2, 0, 0); // test2 疊加於上
}
};
// 綁定 onload 事件
test1.onload = imageLoadedHandler;
test2.onload = imageLoadedHandler;
</script>
</body>
結論：
要在 Canvas 中正確地顯示多張疊加的圖片，務必使用 Image 物件的 onload 事件來監控圖片載入狀態。這不僅可以避免圖片未載入就繪製的錯誤，也能確保圖層疊加順序正確。
留言
張貼留言