it-swarm.com.de

Eine Leinwand zentrieren

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

  1. Nimmt 80% der Breite auf

  2. Enthält eine entsprechende Pixelhöhe und -breite, die das Verhältnis effektiv definiert (und proportional beibehalten wird, wenn die Leinwand auf 80% gedehnt wird).

  3. Ist sowohl vertikal als auch horizontal zentriert

Sie können davon ausgehen, dass canvas die einzige Sache auf der Seite ist, Sie können sie jedoch bei Bedarf in divs einkapseln.

50
user122147

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>
36
Ali OKTAY

Wenn ich mir die aktuellen Antworten anschaue, fehlt mir eine einfache und saubere Lösung. Nur für den Fall, dass jemand vorbeigeht und nach der richtigen Lösung sucht ... Ich bin mit ein paar einfachen CSS und Javascript ziemlich erfolgreich.

Zentriert die Leinwand auf die Bildschirmmitte oder das übergeordnete Element. 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 ein Zauber - getestet: Firefox, Chrom

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

17
Daniel

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

einfachster Weg

legen Sie die Zeichenfläche wie folgt in Absatz-Tags ein:

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

7
J the Helper

um die Leinwand innerhalb des Fensters zu zentrieren, muss + el.style.top und el.style.left + "px" hinzugefügt werden. 

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

Das Ändern der Größe der Leinwand mit css ist keine gute Idee. Dies sollte mit Javascript geschehen. Siehe unten stehende Funktion, die es 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/

.

1
Diode

Da Canvas ohne JavaScript nichts ist, verwenden Sie das JavaScript-Tool zum Größenanpassen und Positionieren (Sie wissen: onresize, position:absolute usw.).

0
Thomas Broyer

Umwickeln mit div sollte funktionieren. Ich habe es in Firefox, Chrome auf Fedora 13 ( demo ) getestet.

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

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

Und die Leinwand sollte in Tag eingeschlossen sein

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

Lass mich wissen ob es funktioniert. Prost.

0
Sainath Mallidi

Zum CSS-Vorschlag:

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

Standardmäßig skaliert CSS das Leinwandkoordinatensystem nicht, es skaliert den Inhalt. In Chrome skaliert das erwähnte CSS die Leinwand auf oder ab, um sie an das Layout des Browsers anzupassen. In einem typischen Fall, in dem das Koordinatensystem kleiner als die Abmessungen des Browsers in Pixel ist, verringert dies die Auflösung Ihrer Zeichnung. Dies führt höchstwahrscheinlich auch zu nichtproportionalem Ziehen. 

0
jerseyboy

Gleiche Codes von Nickolay oben, jedoch auf IE9 und Chrome getestet (und das zusätzliche Rendering entfernt):

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>

Der obere und linke Versatz funktioniert nur, wenn ich px hinzufüge.

0
laishiekai

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