내 페이지 배경에 html5 캔버스 요소가 있습니까?

웹 페이지의 배경에 전체 화면 캔버스 요소를 포함 할 수 있으며 앞에있는 테이블과 같은 "일반"마크 업 요소가있을 수 있습니까? (그것이 다른 내용으로 사용되지 않을 경우) 다음 코드와 같은내 페이지 배경에 html5 캔버스 요소가 있습니까?

<canvas id="imageView" width="100%" height="100%"> 
    <table>...</table> 
</canvas>

출처

2010-04-27 user306708

당신은 그것을 가지고 캔버스에 CSS 스타일을 설정하려고 할 수있는 position: fixed (또는 absolute 적절) 그리고 이을 따르는 내용 (예제에서 제공 한 내용과 대조적으로)이 그 위에 있어야합니다.

출처

2010-04-27 08:19:55

시도 스타일 = 대한 "위치 : 고정, 최고 : 0; 왼쪽 : 0"그것은 잘 작동합니다. 고맙습니다! – user306708

방금 z-index를 설정 함을 발견했습니다. -1; 캔버스를 다른 요소 뒤에 두는 것이 필요합니다. – user306708

+13

@ fx42 :'z-index : -1'을 설정하지 마십시오. 일부 브라우저에서는 엉망입니다. 오히려 나머지 요소를 div에 넣고 해당 div에'z-index : 1'을 설정하십시오. –

다음 코드를 사용해 보았습니다. 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>

출처

2010-04-27 08:33:47 Rob

코드 샘플을 제공해 주셔서 감사합니다. – 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>

출처

2012-05-30 04:18:40

첫 번째 캔버스 그리기에 js가 필요합니다. 하지만 CSS를 사용하여 배경으로 캔버스 요소를 얻을 수 있습니다. 이 스크립트를 사용해보십시오. 통해 통해 ur 필요를 제공 할 수 있습니다 :) –

내 페이지 배경에 html5 캔버스 요소가 있습니까?

답변

관련 문제