Home > Article > Web Front-end > Can I have an HTML canvas element in the background of my page?
Can I have an HTML canvas element in the background of my page?
- 王林forward
- 2023-09-12 14:29:021360browse
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 ofExample 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>
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>
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!