Can I have an HTML canvas element in the background of my page?-HTML Tutorial-php.cn

Can I have an HTML canvas element in the background of my page?

王林

Release： 2023-09-12 14:29:02

forward

1336 people have browsed it

Can I have an HTML canvas element in the background of my page?

In this article, we will see if it is possible to add an HTML canvas element to the background of my page.

You could try adding a CSS style to the canvas with position: fixed (or absolute, if applicable) so that any material behind it will be on top of it.

To better understand if I can use the HTML canvas element in the background of my page, let's look at the following example...

The Chinese translation of

Example 1

is:

Example 1

In the example below, we use position:absolute to apply CSS styles to the canvas.

<!DOCTYPE html>
<html>
   <style>
      canvas{
          position:absolute;
          left:0;
          top:0;
          z-index:-1;
          
      }
      div{
          position:absolute;
          z-index:0;
          left:11px;
          top:14px;
          
      }
   </style>
<body>
    <canvas id="mytutorial" width="450" height="500" style="border:1px solid #ABEBC6;"></canvas>
    <div>Welcome To Tutorialspoint</div>
    <script>
       var c = document.getElementById("mytutorial");
       var ctx = c.getContext("2d");
       var grd = ctx.createLinearGradient(0, 0, 600, 600);
       
       grd.addColorStop(0, "#D35400");
       grd.addColorStop(1, "#73C6B6");
       
       ctx.fillStyle = grd;
       ctx.fillRect(0, 0, 600, 600)
    </script>
</body>
</html>

Copy after login

When running the above script, the output window pops up and a canvas with the text "welcome to tutorialspoint" is displayed on the web page as the background.

Example 2

Let's consider another example of using the HTML canvas element in the background of the page.

<!DOCTYPE html>
<html>
   <style>
      body {
          background: #dddddd;
      }
      #tutorial {
          margin: 20px;
          padding: 20px;
          background: #ffffff;
          border: thin inset #aaaaaa;
          width: 600px;
          height: 300px;
      }
   </style>
<body>
    <canvas id='tutorial'></canvas>
    <script>
    var canvas = document.getElementById('tutorial'),

    context = canvas.getContext('2d');
    context.font = '38pt arial';

    context.strokeStyle = '#82E0AA';
    context.strokeText('Welcome', canvas.width/2 - 150, canvas.height/2 + 15 );
    </script>
</body>
</html>

Copy after login

After running the above script, it will generate an output consisting of stroked text that fills the canvas displayed on the web page as the background of the page.

The above is the detailed content of Can I have an HTML canvas element in the background of my page?. For more information, please follow other related articles on the PHP Chinese website!