是否可以在网页的背景上放置一个全屏画布元素,再放置一些“正常”的标记元素,例如表格?
类似于以下代码片段(如果它不用作备选内容):
<canvas id="imageView" width="100%" height="100%">
<table>...</table>
</canvas>
你可以尝试在画布上设置一个CSS样式,其中有position:fixed
(或适当的absolute
),然后任何跟随它的内容(与你示例中的容器内容不同)应该位于其上方。
您可以尝试在画布上设置 CSS 样式,使其具有 position: fixed
(或适用的 absolute
),然后任何跟随它的内容(与您示例中的容器内容不同)应该位于其上方。
<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>
我已经为您尝试了以下代码。 div元素会像Matthew所描述的那样放置在画布元素的顶部。因此,这对您也应该有效:
<!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>
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>
z-index: -1
,它会影响某些浏览器。相反,将其余元素包裹在一个 div 中,并在该 div 上设置z-index: 1
。 - Matthew Scharley