So zentrieren Sie die Leinwand in HTML5

105

Ich habe schon eine Weile nach einer Lösung gesucht, aber nichts gefunden. Vielleicht sind es nur meine Suchbegriffe. Nun, ich versuche, das Canvas-Center entsprechend der Größe des Browserfensters zu gestalten. Die Leinwand ist 800x600. Und wenn das Fenster unter 800x600 fällt, sollte auch die Größe geändert werden (aber das ist im Moment nicht sehr wichtig).

— jorgen
quelle

Wie kann ich festlegen, dass eine ganzseitige Zeichenfläche ohne Angabe von Abmessungen und ohne Bildlaufleisten beim Ändern der Größe erstellt wird?

— Jorgen

2

Mach es nicht in HTML. Mach es mit Javascript, benutze Dinge wie appendChild oder so und setze Breite und Höhe auf window.innerWidth und window.innerHeight

— der JinX

173

Geben Sie der Zeichenfläche die folgenden CSS-Stileigenschaften:

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 800px;
}

Bearbeiten

Da diese Antwort sehr beliebt ist, möchte ich noch ein paar Details hinzufügen.

Die obigen Eigenschaften zentrieren die Zeichenfläche, div oder einen anderen Knoten, den Sie relativ zu seinem übergeordneten Knoten haben, horizontal . Die oberen oder unteren Ränder und Polster müssen nicht geändert werden. Sie geben eine Breite an und lassen den Browser den verbleibenden Bereich mit den automatischen Rändern füllen.

Wenn Sie jedoch weniger eingeben möchten, können Sie beliebige CSS-Kurzschrift-Eigenschaften verwenden, z

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
}

Das vertikale Zentrieren der Leinwand erfordert jedoch einen anderen Ansatz. Sie müssen die absolute Positionierung verwenden und sowohl die Breite als auch die Höhe angeben. Setzen Sie dann die Eigenschaften left, right, top und bottom auf 0 und lassen Sie den Browser den verbleibenden Bereich mit den automatischen Rändern füllen.

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
    height: 600px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Die Zeichenfläche zentriert sich basierend auf dem ersten übergeordneten Element, das positionauf relativeoder gesetzt wurde absolute, oder dem Körper, wenn keines gefunden wird.

Ein anderer Ansatz wäre die Verwendung display: flex, die in IE11 verfügbar ist

Stellen Sie außerdem sicher, dass Sie einen aktuellen Doctype wie xhtml oder html 5 verwenden.

— Marco Luglio
quelle

8

Bildschirmsperre; und Rand: 0 auto 0 auto; ist auch genug. Vielen Dank!

— Chris

Um eine Zeichenfläche vertikal zu zentrieren, müssen Sie Breite und Höhe nicht eingeben, solange Sie sie im HTML-Code angeben. Jedenfalls auf Chrom.

— Zac

1

Breite und Höhe können in CSS oder HTML angegeben werden. CSS ist jedoch der empfohlene Weg, da die gesamte Präsentationslogik dorthin gehen sollte.

— Marco Luglio

1

Es zentriert die Leinwand, aber wenn auf der Leinwand ein Bild gezeichnet ist, wird es gedehnt. Können Sie die Leinwand

— zentrieren,

Das Festlegen von Höhe und Breite in Inline-Stilen auf dem Canvas-Element hat die Größe meiner gezeichneten Bilder und dergleichen durcheinander gebracht. Nur eine Einschränkung, die hoffentlich jemandem etwas Frust ersparen wird.

— MrBoJangles

52

Sie können Ihrer Zeichenfläche die ff CSS-Eigenschaften geben:

#myCanvas
{
    display: block;
    margin: 0 auto;
}

— jinmichaelr
quelle

Können Sie eine jsfiddle zur Verfügung stellen? Dieser Ansatz scheint nicht zu funktionieren

— jose.angel.jimenez

3

Dies funktioniert für die horizontale Zentrierung, jedoch nicht für die vertikale Zentrierung.

— Matty J

20

Zentrieren Sie das div einfach in HTML:

  #test {
     width: 100px;
     height:100px;
     margin: 0px auto;
     border: 1px solid red;
   }


<div id="test">
   <canvas width="100" height="100"></canvas>
</div>

Ändern Sie einfach die Höhe und Breite auf was auch immer und Sie haben ein zentriertes Div

http://jsfiddle.net/BVghc/2/

— JoeCianflone
quelle

Zum Glück brauchte ich das kurz nachdem du es gepostet hast. :)

— Mcandre

5

Dies funktioniert nicht, wenn die Zeichenfläche kleiner als der Container ist.

— SystemicPlural

8

Um das Canvas-Element horizontal zu zentrieren, müssen Sie es als Blockebene angeben und seine Eigenschaften für den linken und rechten Rand dem Browser überlassen:

canvas{
    margin-right: auto;
    margin-left: auto;
    display: block;
}

Wenn Sie es vertikal zentrieren möchten, muss das Canvas-Element unbedingt positioniert sein:

canvas{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);              
}

Wenn Sie es horizontal und vertikal zentrieren möchten, gehen Sie wie folgt vor:

canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);               
}

Weitere Informationen finden Sie unter: https://www.w3.org/Style/Examples/007/center.en.html

— Konkret
quelle

5

Die obigen Antworten funktionieren nur, wenn Ihre Leinwand dieselbe Breite wie der Container hat.

Dies funktioniert unabhängig davon:

#container {
  width: 100px;
  height:100px;
  border: 1px solid red;
  
  
  margin: 0px auto;
  text-align: center;
}

#canvas {
  border: 1px solid blue;
  width: 50px;
  height: 100px;
  
}

<div id="container">
  <canvas id="canvas" width="100" height="100"></canvas>
</div>

Erweitern Sie das Snippet

— SystemicPlural
quelle

3

Verwenden Sie diesen Code:

<!DOCTYPE html>
<html>
<head>
<style>
.text-center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>

<div class="text-center">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>

</body>
</html>

— Keyur Patel
quelle

2

Ich hatte das gleiche Problem, da ich Bilder mit vielen verschiedenen Breiten habe, die ich nur mit Höheninformationen lade. Durch Einstellen einer Breite kann der Browser das Bild strecken und zusammendrücken. Ich löse das Problem, indem ich die Textzeile kurz vor der image_tag-Zeile zentriere (auch float: left loswerden;). Ich hätte mir gewünscht, dass der Text linksbündig ist, aber dies ist eine kleine Unannehmlichkeit, die ich tolerieren kann.

— MDM
quelle

0

In text-align: center;auf den übergeordneten Tag von <canvas>. Das ist es.

Beispiel:

<div style="text-align: center">
    <canvas width="300" height="300">
        <!--your canvas code -->
    </canvas>
</div>

— Raj Yadav
quelle

Dies ist einfach, wenn Sie CSS verwenden

— Clifton Avil D'Souza