在 HTML5 的 Canvas 元素中使用 drawImage() 方法繪製圖片時，若有多張圖片需依序疊加顯示，確保每張圖片都已完整載入至記憶體是極為重要的。若在圖片尚未載入完成時就嘗試繪製，drawImage() 將無法正確顯示圖片，導致畫面缺失。
本文範例示範如何透過 Image 物件的 onload 事件處理機制，確保兩張圖片載入完成後再繪製，並正確疊加其圖層順序。
範例說明：
範例程式碼：
<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 = "t1.png";
test2.src = "t2.png";
// 圖片載入追蹤邏輯
let imagesLoaded = 0;
const totalImages = 2;
const imageLoadedHandler = () => {
imagesLoaded++;
if (imagesLoaded === totalImages) { // 所有圖片載入完成後，按順序繪製
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空 Canvas
ctx.drawImage(test1, 0, 0); // 先繪製 test1 （t1.png）作為底層
ctx.drawImage(test2, 0, 0); // 後繪製 test2 （t2.png）疊加於 test1 （t1.png）之上
}
};
test1.onload = imageLoadedHandler;
test2.onload = imageLoadedHandler;
</script>
</body>
結論：
要在 Canvas 中正確地顯示多張疊加的圖片，務必使用 Image 物件的 onload 事件來監控圖片載入狀態，確保每張圖片都已完整載入記憶體後才按順序繪製。這不僅可以避免圖片未載入就繪製的錯誤，也能確保圖層疊加順序正確。
沒有留言:
張貼留言