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);
};

我这里只能看到一张图片，但是看不到文字；文字被图片覆盖了。如何将文字插入到图片顶部？

- Rajesh Rs

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"; 
};

示例：

- Jonas

---

嘿，乔纳斯，谢谢你的回复...在我上面提到的情况下，有没有办法让图片上方的文本显示出来...??????? - Rajesh Rs

@RajeshRs：是的，请为文本的Y坐标使用较小的值。 - Jonas

@Jonas 你好 Jonas，你知道如何将图片放在画布上吗？这是可能的吗？ - ggDeGreat