Có thể có phần tử canvas toàn màn hình trong nền của trang web và các yếu tố đánh dấu "bình thường" như bảng ở phía trước không?Phần tử canvas html5 trong nền của trang của tôi?
như đoạn sau (nếu nó sẽ không được sử dụng như nội dung thay thế):
<canvas id="imageView" width="100%" height="100%">
<table>...</table>
</canvas>
Bạn có thể thử đặt một kiểu CSS trên vải mà nó có một position: fixed (hoặc absolute nếu thích hợp), và sau đó bất kỳ nội dung nào mà theo sau nó (trái ngược với nội dung vùng chứa như bạn đã đưa ra trong ví dụ của bạn) phải nằm trên đầu trang của nó.
Tôi đã thử nó cho bạn với mã sau. Div được đặt trên đỉnh của phần tử canvas giống như Matthew mô tả nó. Vì vậy, nên làm việc cho bạn
<!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>
Cảm ơn bạn đã lấy mẫu mã. – mihsathe
<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>
Firstyl u cần js cho bản vẽ canvas. nhưng u có thể đạt được phần tử canvas làm nền chỉ bằng cách sử dụng CSS. hãy thử tập lệnh này. và có thể phục vụ nhu cầu ur :) –
thử style = "position: fixed; top: 0; left: 0" và nó hoạt động tốt. thanx! – user306708
vừa phát hiện ra rằng thiết lập z-index: -1; là cần thiết để đặt canvas phía sau các phần tử khác. – user306708
@ fx42: Không đặt 'z-index: -1', nó gây rối với một số trình duyệt. Thay vào đó, bọc phần tử còn lại của bạn vào một div và đặt 'z-index: 1' trên div đó. –