Html 我页面背景中的 html5 canvas 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2719668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
An html5 canvas element in the background of my page?
提问by user306708
Is it possible to have a full screen canvas element in the background of a webpage and "normal" markup elements like a table in front of it?
是否可以在网页的背景中使用全屏画布元素，并在其前面使用表格等“普通”标记元素？
like the following snippet (if it wouldn't be used as alternative content):
像下面的片段（如果它不会被用作替代内容）：
<canvas id="imageView" width="100%" height="100%">
<table>...</table>
</canvas>
采纳答案by Matthew Scharley
You could try setting a CSS style on the canvas where it has a position: fixed(or absoluteas appropriate), and then any content that followsit (as opposed to container content as you've given in your example) should sit on top of it.
你可以尝试在画布上设置一个CSS样式，其中有一个position: fixed（或absolute根据需要），然后任何内容如下它（而不是容器内容你已经在你的例子给出）应该坐在它上面。
回答by Rob
I tried it for you with the following code. The div gets placed on top of the canvas element just as Matthew describes it. So should work for you
我用下面的代码为你试过了。正如 Matthew 所描述的那样，div 被放置在 canvas 元素的顶部。所以应该为你工作
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas demo</title>
<style type="text/css">
#canvasSection{ position:fixed;}
</style>
<script type="text/javascript">
function draw()
{
//paint the text
var canvas = document.getElementById('canvasSection');
var context = canvas.getContext('2d');
context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.font = 'bold 30px sans-serif';
context.strokeText('Your Text!!', 0, 0);
//paint the square
var canvasSquare = document.getElementById('canvasSquare');
var ctxSquare = canvas.getContext('2d');
ctxSquare.fillStyle='#FF0000';
ctxSquare.fillRect(0, 100,50,100);
}
</script>
</head>
<body onLoad="draw()">
<canvas id="canvasSection">Error, canvas is not supported</canvas>
<div>TestText</div>
</body>
</html>
回答by Rj Lakhani
<html>
<style>
body{
margin:0;
padding:0;
}
canvas{
position:absolute;
left:0;
top:0;
z-index:-1;
}
div{
position:absolute;
z-index:0;
left:12px;
top:10px;
}
</style>
<body>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<div>hello is floating div</div>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,600,600);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,600,600);
</script>
</body>
</html>
回答by Rj Lakhani
You can use toDataURL()to have it in pure JS separated from HTML
您可以使用toDataURL()将其放在与 HTML 分离的纯 JS 中
var c = document.createElement('canvas'),
ctx = c.getContext('2d'),
size = c.width = c.height = 50;
for( var x = 0; x < size; x++ ){
for( var y = 0; y < size; y++ ){
ctx.fillStyle = 'hsl(0, 0%, ' + ( 100 - ( Math.random() * 15 ) ) + '%)';
ctx.fillRect(x, y, 1, 1);
}
}
document.body.style.background = 'url(' + c.toDataURL() + ')';HTML on <b>canvas background</b>Based on this CodePen
基于此CodePen
