如何在 HTML5 画布中的图像顶部写入文本？

【问题标题】：How to write text on top of image in HTML5 canvas?如何在 HTML5 画布中的图像顶部写入文本？
【发布时间】：2011-12-08 09:48:09
【问题描述】：

我想在画布上显示图像并在该图像上插入文本。

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

我在这里只得到一张图片，而不是文字；文字在图片后面。如何在图片顶部插入文字？

【问题讨论】：

标签： javascript canvas

【解决方案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 thanx 的回复......在我上面提到的情况下，我有什么办法可以得到图片上方的文字...... ???????
@RajeshRs：是的，对文本的 Y 坐标使用较小的值。
@Jonas 嗨乔纳斯，你知道如何将图像放在画布图像上吗？有可能吗？