Zentrieren einer Leinwand

Question 1

Wie markiere ich eine Seite mit HTML5 canvas so dass die canvas

Nimmt 80 % der Breite ein
Hat eine entsprechende Pixelhöhe und -breite, die das Verhältnis effektiv definieren (und proportional beibehalten werden, wenn die Leinwand auf 80 % gedehnt wird)

Ist sowohl vertikal als auch horizontal zentriert

Sie können davon ausgehen, dass die canvas ist das Einzige auf der Seite, aber Sie können es gerne einkapseln divs ggf.

Question 2

Dadurch wird die Leinwand horizontal zentriert:

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

canvas {
   display: inline;
}

HTML:

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

Question 3

Wenn ich mir die aktuellen Antworten ansehe, habe ich das Gefühl, dass eine einfache und saubere Lösung fehlt. Nur für den Fall, dass jemand vorbeikommt und nach der richtigen Lösung sucht. Ich bin ziemlich erfolgreich mit einigen einfachen CSS und Javascript.

Zentrieren Sie die Leinwand in der Mitte des Bildschirms oder des übergeordneten Elements. Keine Verpackung.

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;
}

Funktioniert wie am Schnürchen – getestet: Firefox, Chrom

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

Question 4

einfachster Weg

Fügen Sie die Leinwand wie folgt in Absatz-Tags ein:

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

Question 5

Nur auf Firefox getestet:

<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>

Question 6

Um die Leinwand innerhalb des Fensters zu zentrieren, sollte +”px” hinzugefügt werden el.style.top und el.style.left.

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

Question 7

Die Größenänderung der Leinwand mit CSS ist keine gute Idee. Dies sollte mit Javascript erfolgen. Sehen Sie sich die folgende Funktion an, die dies tut

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";


}

Demo hier: http://jsfiddle.net/9Rmwt/11/show/

.

Question 8

Einfach:

<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>