在 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"; ...