如何将文本放在画布上的背景图像上？答案

【问题标题】：How to put text on a background image which is on a canvas?如何将文本放在画布上的背景图像上？
【发布时间】：2018-10-09 14:59:37
【问题描述】：

我想知道如何将文本放在画布中的图像之上。图像需要在画布中，因为它是我的游戏（Breakout）的一部分。我收到了一些文字，但它隐藏在令人讨厌的图像后面。

代码：

    <!DOCTYPE html>
    <html>

    <head>
        <title>Breakout</title>
    </head>

    <body bgcolor="#4d0000">

    <p align="center">
    <canvas id="canvas" width="1500" height="800" style="border:1px solid #d3d3d3;"></canvas>
    </p>

    <script>

    window.onload = function(){
     var canvas = document.getElementById("canvas");
     var context = canvas.getContext("2d");
     var imageObj = new Image();
     imageObj.onload = function(){
         context.drawImage(imageObj, 0, 0);
         context.font = "40pt Calibri";
         context.fillText("BREAKOUT", 625, 100);
     };
     imageObj.src = 'C:/Users/study/Desktop/Breakout/Images/test3.jpg'; 
};  



    </script>

    </body>
    </html>

【问题讨论】：

先画图，再画文字。
@FrankerZ 没有区别
@FrankerZ 所说的是最好的答案。另一种解决方案是在绘制图像之前将globalCompositeOperationdeveloper.mozilla.org/en-US/docs/Web/API/… 设置为destination-over。
@Rolls_Reus_0wner 显示您的代码。您是否将其放在 .onload() 之后而不是该函数中？
@FrankerZ 函数里怎么放？

标签： javascript html canvas html5-canvas

【解决方案1】：

你试过的代码没有问题，因为文字context.fillText("BREAKOUT", 625, 100);的位置在canvas中不可见

所以，只要改变文本的位置或增加图像大小

这可以帮助你Simulation background-size: cover in canvas

现在您可以在任何可能的地方拥有您的文本！

<!DOCTYPE html>
<html>

  <head>
    <title>Breakout</title>
  </head>

  <body bgcolor="#4d0000">

    <p align="center">
      <canvas id="canvas" width="1500" height="800" style="border:1px solid #d3d3d3;"></canvas>
    </p>

    <script>

      window.onload = function(){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var imageObj = new Image();
        imageObj.onload = function(){
          context.drawImage(imageObj, 0, 0);
          context.font = "40pt Calibri";
          context.fillText("BREAKOUT", 20, 80, imageObj.width*2, imageObj.height * 2);

        };

        imageObj.src = 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350'; 

      };  



    </script>

  </body>
</html>

编辑

在加载图像之前自己调试文本是否显示？所以，如果你尝试过这样的事情

window.onload = function(){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.font = "40pt Calibri";
        context.fillText("BREAKOUT", 620, 100);
        var imageObj = new Image();
        imageObj.onload = function(){
          context.drawImage(imageObj, 0, 0);
        };
        imageObj.src = 'C:/Users/study/Desktop/Breakout/Images/test3.jpg'; 
      };

文字不会显示！所以只需将文本位置更改为context.fillText("BREAKOUT", 20, 80); 之类的内容，然后查看文本。所以你写的代码没有问题。

希望你能得到问题的答案。

谢谢。

【讨论】：