Question

我想知道如何将文本放在画布上的图像上方。图片必须在画布中，因为它是我游戏的一部分（突破）。我收到了一些文字，但文字背后是令人讨厌的图片。

代码：

    <!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>

Answer 1

您尝试的代码没有问题，由于文本context.fillText("BREAKOUT", 625, 100);的位置

在画布中不可见

因此，只需更改文本的位置或增加图像大小

这可以帮助您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);之类的内容，然后看到文本。因此，您编写的代码没有问题。

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

谢谢。

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

1 个答案: