Un élément html5 canvas dans le fond de ma page?

Est-il possible d'avoir un plein écran de l'élément canvas dans le fond d'une page web et "normal" les éléments de balisage comme une table en face de lui?

comme l'extrait de code suivant (si il ne serait pas utilisé en tant que contenu alternatif):

<canvas id="imageView" width="100%" height="100%">
    <table>...</table>
</canvas>
InformationsquelleAutor user306708 | 2010-04-27
  1. 32

    Vous pourriez essayer de définir une feuille de style CSS sur la toile où il a un position: fixed (ou absolute selon le cas), et puis tout contenu que suit c' (par opposition au contenu du conteneur que vous avez donné dans votre exemple) doit s'asseoir sur le dessus de cela.

    • essayé style="position:fixed; top:0;left:0" et il fonctionne très bien. merci!
    • viens de découvrir que l'établissement de z-index:-1; est nécessaire pour mettre la toile derrière les autres éléments.
    • Ne définissez pas z-index: -1, il mess avec certains navigateurs. Plutôt, enroulez le reste de vos éléments dans un div et de définir z-index: 1 sur div.
    • je ne peux pas le faire fonctionner. pastebin.com/ZZZpzXiZ
    • Obtenir les mêmes résultats que vous: jsfiddle.net/zhZxM/1 je suppose que cela n'aurait pas été acceptée que si elle ne fonctionne pas bien, peut-être essayer d'obtenir une réponse de @user306708 pour voir si il y avait autre chose qu'il devait faire?
    • essayez de z-index:-1 sur la toile.
    • vient de partout, mais vous avez besoin de la position relative/absolue sur la div vous définissez le z-index sur(jsfiddle.net/BlessYAHU/zhZxM/132).

    InformationsquelleAutor Matthew Scharley
  2. 7

    Je l'ai essayé pour vous avec le code suivant. La div est placé sur le dessus de l'élément canvas tout comme Matthieu décrit-il. Donc devrait 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>
    • Merci pour l'exemple de code.
    InformationsquelleAutor Rob
  3. 6
    <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 besoin de js pour toile de dessin. mais u peut atteindre une toile élément d'arrière-plan en utilisant le CSS. essayer ce script. et peut servir ur besoin 🙂
    • Travaillé parfait pour moi!
    InformationsquelleAutor Rj Lakhani