如何在 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"; 
};

例子：