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

示例：