web-dev-qa-db-fra.com

Un élément de toile html5 en arrière-plan de ma page?

Est-il possible d'avoir un élément de canevas plein écran en arrière-plan d'une page Web et des éléments de balisage "normaux" comme un tableau devant?

comme l'extrait suivant (s'il ne serait pas utilisé comme contenu alternatif):

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

Vous pouvez essayer de définir un style CSS sur le canevas où il a un position: fixed (ou absolute selon le cas), puis tout contenu qui suit il (par opposition au contenu du conteneur comme vous l'avez indiqué dans votre exemple) devrait être placé dessus.

34
Matthew Scharley

Je l'ai essayé pour vous avec le code suivant. Le div est placé au-dessus de l'élément canvas, comme Matthew le décrit. Devrait donc fonctionner pour vous

<!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>
7
Rob
<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>
6
Rj Lakhani

Vous pouvez utiliser toDataURL () pour l'avoir en JS pur séparé du 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>

Sur la base de cela CodePen

0
Pauli Sudarshan Terho