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

Question

I wanted to know how do I put text on top of the image which is in the canvas. 我想知道如何将文本放在画布上的图像上方。 The image needs to be in the canvas since it is part of my game (Breakout). 图片必须在画布中，因为它是我游戏的一部分（突破）。 I get some text but it goes behind the image which is annoying. 我收到一些文本，但它在令人讨厌的图像后面。

Code: 码：

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

There is no problem with the code you tried, it is not visible in the canvas because of the position of the text context.fillText("BREAKOUT", 625, 100); 您尝试的代码没有问题，由于文本context.fillText("BREAKOUT", 625, 100);的位置，它在画布中不可见context.fillText("BREAKOUT", 625, 100);

So, just change the position of the text or increase the image size 因此，只需更改文本的位置或增加图像大小

This helps you Simulation background-size: cover in canvas 这可以帮助您模拟背景大小：画布中的封面

Now you can have your text wherever possible! 现在，您可以随时输入文字！

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

Edit 编辑

Debug yourself whether the text is displaying before the image is loaded? 调试自己是否在加载图像之前显示文本？ So, if you have tried something like this 所以，如果您尝试过这样的事情

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

The text won't be displayed! 文本将不会显示！ so just change the text position to something like context.fillText("BREAKOUT", 20, 80); 因此只需将文本位置更改为context.fillText("BREAKOUT", 20, 80); and see, the text appears. 然后看到文本出现。 So There is no problem with the code you have written. 因此，您编写的代码没有问题。

Hope you got the answer to the question. 希望您能得到问题的答案。

Thank you. 谢谢。

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

问题描述

1 个解决方案

解决方案1
0 2018-10-09 06:54:36

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

问题描述

1 个解决方案

解决方案1 0 2018-10-09 06:54:36

解决方案1
0 2018-10-09 06:54:36