web-dev-qa-db-fra.com

Centrer une toile

Comment marquer une page avec une canvas HTML5 telle que la canvas

  1. Prend 80% de la largeur

  2. A une hauteur et une largeur de pixel correspondantes qui définissent effectivement le rapport (et sont maintenues proportionnellement lorsque la toile est étirée à 80%)

  3. Est centré verticalement et horizontalement

Vous pouvez supposer que canvas est la seule chose de la page, mais n'hésitez pas à l'encapsuler dans divs si nécessaire.

htmlcsshtml5canvas
50
user122147

Cela va centrer la toile horizontalement:

#canvas-container {
   width: 100%;
   text-align:center;
}

canvas {
   display: inline;
}

HTML:

<div id="canvas-container">
   <canvas>Your browser doesn't support canvas</canvas>
</div>
36
Ali OKTAY

En regardant les réponses actuelles, j’ai le sentiment qu’il manque une solution simple et efficace. Juste au cas où quelqu'un passerait à la recherche de la bonne solution ... Je réussis plutôt bien avec du CSS simple et du javascript.

Centre toile au milieu de l'écran ou de l'élément parent. Pas d'emballage.

HTML:

<canvas id="canvas" width="400" height="300">No canvas support</canvas>

CSS:

#canvas {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
}

Javascript:

window.onload = window.onresize = function() {
    var canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth * 0.8;
    canvas.height = window.innerHeight * 0.8;
}

Fonctionne comme un charme - testé: firefox, chrome

violon: http://jsfiddle.net/djwave28/j6cffppa/3/

17
Daniel

Testé uniquement sur Firefox:

<script>
window.onload = window.onresize = function() {
    var C = 0.8;        // canvas width to viewport width ratio
    var W_TO_H = 2/1;   // canvas width to canvas height ratio
    var el = document.getElementById("a");

    // For IE compatibility http://www.google.com/search?q=get+viewport+size+js
    var viewportWidth = window.innerWidth;
    var viewportHeight = window.innerHeight;

    var canvasWidth = viewportWidth * C;
    var canvasHeight = canvasWidth / W_TO_H;
    el.style.position = "fixed";
    el.setAttribute("width", canvasWidth);
    el.setAttribute("height", canvasHeight);
    el.style.top = (viewportHeight - canvasHeight) / 2;
    el.style.left = (viewportWidth - canvasWidth) / 2;

    window.ctx = el.getContext("2d");
    ctx.clearRect(0,0,canvasWidth,canvasHeight);
    ctx.fillStyle = 'yellow';
    ctx.moveTo(0, canvasHeight/2);
    ctx.lineTo(canvasWidth/2, 0);
    ctx.lineTo(canvasWidth, canvasHeight/2);
    ctx.lineTo(canvasWidth/2, canvasHeight);
    ctx.lineTo(0, canvasHeight/2);
    ctx.fill()
}
</script>

<body>
<canvas id="a" style="background: black">
</canvas>
</body>
7
Nickolay

manière la plus simple

mettez le canevas en balises de paragraphe comme ceci: 

<p align="center">
  <canvas id="myCanvas" style="background:#220000" width="700" height="500" align="right"></canvas>
</p>

7
J the Helper

afin de centrer le canevas dans la fenêtre, vous devez ajouter "px" à el.style.top et el.style.left 

el.style.top = (viewportHeight - canvasHeight) / 2 +"px";
el.style.left = (viewportWidth - canvasWidth) / 2 +"px";
4
Shawn

Redimensionner la toile à l’aide de CSS n’est pas une bonne idée. Cela devrait être fait en utilisant Javascript. Voir la fonction ci-dessous qui le fait

function setCanvas(){

   var canvasNode = document.getElementById('xCanvas');

   var pw = canvasNode.parentNode.clientWidth;
   var ph = canvasNode.parentNode.clientHeight;

   canvasNode.height = pw * 0.8 * (canvasNode.height/canvasNode.width);  
   canvasNode.width = pw * 0.8;
   canvasNode.style.top = (ph-canvasNode.height)/2 + "px";
   canvasNode.style.left = (pw-canvasNode.width)/2 + "px";


}

démo ici: http://jsfiddle.net/9Rmwt/11/show/

.

1
Diode

Étant donné que la toile n'est rien sans JavaScript, utilisez l'outil JavaScript pour le dimensionnement et le positionnement (vous savez: onresize, position:absolute, etc.)

0
Thomas Broyer

Envelopper avec div devrait fonctionner. Je l'ai testé dans Firefox, Chrome sur Fedora 13 ( demo ).

#content {
   width: 95%;
   height: 95%;
   margin: auto;
}

#myCanvas {
   width: 100%;
   height: 100%;
   border: 1px solid black;
}

Et la toile doit être incluse dans la balise

<div id="content">
    <canvas id="myCanvas">Your browser doesn't support canvas tag</canvas>
</div>

Laissez-moi savoir si cela fonctionne. À votre santé.

0
Sainath Mallidi

En ce qui concerne la suggestion CSS:

#myCanvas { 
 width: 100%;
 height: 100%;
}

En standard, CSS ne redimensionne pas le système de coordonnées de la toile, il redimensionne le contenu. Dans Chrome, le CSS mentionné adaptera la trame à la hausse ou à la baisse pour s’adapter à la présentation du navigateur. Dans le cas typique où le système de coordonnées est plus petit que les dimensions du navigateur en pixels, cela réduit efficacement la résolution de votre dessin. Il en résulte très probablement un tirage non proportionnel. 

0
jerseyboy

Mêmes codes de Nickolay ci-dessus, mais testés sur IE9 et Chrome (et suppression du rendu supplémentaire):

window.onload = window.onresize = function() {
   var canvas = document.getElementById('canvas');
   var viewportWidth = window.innerWidth;
   var viewportHeight = window.innerHeight;
   var canvasWidth = viewportWidth * 0.8;
   var canvasHeight = canvasWidth / 2;

   canvas.style.position = "absolute";
   canvas.setAttribute("width", canvasWidth);
   canvas.setAttribute("height", canvasHeight);
   canvas.style.top = (viewportHeight - canvasHeight) / 2 + "px";
   canvas.style.left = (viewportWidth - canvasWidth) / 2 + "px";
}

HTML:

<body>
  <canvas id="canvas" style="background: #ffffff">
     Canvas is not supported.
  </canvas>
</body>

Le décalage en haut et à gauche ne fonctionne que lorsque j'ajoute px.

0
laishiekai

Simple:

<body>
    <div>
        <div style="width: 800px; height:500px; margin: 50px auto;">
            <canvas width="800" height="500" style="background:#CCC">
             Your browser does not support HTML5 Canvas.
            </canvas>
        </div>
    </div>
</body>
0
user2664108