如何在HTML5畫布上的圖像上寫文字？

Question

我想在畫布上顯示圖像並在該圖像的頂部插入文本。

window.onload = function() { 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var imageObj = new Image(); 

    imageObj.onload = function() { 
     context.drawImage(imageObj, 10, 10); 
    }; 

    imageObj.src = "darth-vader.jpg"; 
    context.font = "40pt Calibri"; 
    context.fillText("My TEXT!", 20, 20); 
}; 

我只在這裏得到一個圖像，但不是文本;文字在圖像後面。 如何在圖片頂部插入文字？

Answer 1

這是因爲您在圖像加載並繪製之前繪製文本。繪製圖像後，您必須繪製圖像頂部的文字。試試這個代碼，而不是：

window.onload = function(){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var imageObj = new Image(); 
    imageObj.onload = function(){ 
     context.drawImage(imageObj, 10, 10); 
     context.font = "40pt Calibri"; 
     context.fillText("My TEXT!", 20, 20); 
    }; 
    imageObj.src = "darth-vader.jpg"; 
}; 

例子：