Jak wyśrodkować płótno w HTML5

105

Od jakiegoś czasu szukałem rozwiązania, ale nic nie znalazłem. Może to tylko moje wyszukiwane hasła. Cóż, próbuję wyśrodkować płótno zgodnie z rozmiarem okna przeglądarki. Płótno ma wymiary 800x600. A jeśli okno spadnie poniżej 800x600, powinno również zmienić rozmiar (ale to nie jest w tej chwili bardzo ważne)

html canvas css resize jorgen
źródło

Jak powiedzieć mu, aby utworzył płótno na całej stronie bez podawania wymiarów i bez pasków przewijania podczas zmiany rozmiaru?

jorgen

2

Nie rób tego w HTML .. zrób to za pomocą javascript, użyj rzeczy takich jak appendChild lub coś w tym rodzaju i ustaw szerokość i wysokość na window.innerWidth i window.innerHeight

the JinX

173

Nadaj kanwie następujące właściwości stylu CSS:

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

Edytować

Ponieważ ta odpowiedź jest dość popularna, dodam trochę więcej szczegółów.

Powyższe właściwości wyśrodkują w poziomie płótno, div lub jakikolwiek inny węzeł, który masz względem jego rodzica. Nie ma potrzeby zmiany górnych lub dolnych marginesów i wypełnień. Określasz szerokość i pozwalasz przeglądarce wypełnić pozostałe miejsce automatycznymi marginesami.

Jeśli jednak chcesz wpisać mniej, możesz użyć dowolnych skróconych właściwości CSS, takich jak

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

Centrowanie płótna w pionie wymaga jednak innego podejścia. Musisz użyć pozycjonowania bezwzględnego i określić zarówno szerokość, jak i wysokość. Następnie ustaw właściwości left, right, top i bottom na 0 i pozwól przeglądarce wypełnić pozostałe miejsce automatycznymi marginesami.

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

Kanwa wyśrodkuje się na podstawie pierwszego elementu nadrzędnego, który ma positionustawioną wartość relativelub absolute, lub treści, jeśli nie zostanie znaleziona.

Innym podejściem byłoby użycie display: flextego, co jest dostępne w IE11

Upewnij się również, że używasz najnowszego typu dokumentu, takiego jak xhtml lub html 5.

Marco Luglio
źródło

8

Blok wyświetlacza; i margines: 0 auto 0 auto; też wystarczy. Dzięki!

Chris,

Aby wyśrodkować płótno w pionie, nie musisz podawać szerokości i wysokości, o ile określisz je w kodzie HTML. W każdym razie na chrome.

Zac

1

Szerokość i wysokość można określić w css lub html. Ale css jest zalecanym sposobem, ponieważ cała logika prezentacji powinna tam iść.

Marco Luglio,

1

Centruje płótno, ale jeśli na płótnie jest narysowany obraz, to się rozciąga. Czy możesz wyśrodkować płótno bez rozciągania obrazu

aryan

Ustawienie wysokości i szerokości w stylach wbudowanych w elemencie canvas zepsuło rozmiary moich rysowanych obrazów i tym podobne. Tylko ostrzeżenie, które, miejmy nadzieję, pozwoli komuś zaoszczędzić trochę frustracji.

MrBoJangles

52

Możesz nadać swojemu płótnie właściwości CSS ff:

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

jinmichaelr
źródło

Czy możesz zapewnić jsfiddle? To podejście wydaje się nie działać

jose.angel.jimenez

3

Działa to przy centrowaniu w poziomie, ale nie w pionie.

Matty J

20

Po prostu wyśrodkuj element div w HTML:

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


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

Po prostu zmień wysokość i szerokość na dowolną, a otrzymasz wyśrodkowany element div

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

JoeCianflone
źródło

Szczęściarz, potrzebowałem tego wkrótce po tym, jak to opublikowałeś. :)

mcandre

5

To nie działa, jeśli płótno jest mniejsze niż pojemnik.

SystemicPlural

8

Aby wyśrodkować element canvas w poziomie, musisz określić go jako poziom bloku i pozostawić jego właściwości lewego i prawego marginesu przeglądarce:

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

Jeśli chcesz wyśrodkować go w pionie, element canvas musi być bezwzględnie ustawiony:

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

Jeśli chcesz wyśrodkować go w pionie i poziomie, zrób:

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

Aby uzyskać więcej informacji, odwiedź: https://www.w3.org/Style/Examples/007/center.en.html

Konkret
źródło

5

Powyższe odpowiedzi działają tylko wtedy, gdy płótno ma taką samą szerokość jak kontener.

Działa to niezależnie od:

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

Rozwiń fragment

SystemicPlural
źródło

3

Użyj tego kodu:

<!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
źródło

2

Miałem ten sam problem, ponieważ mam zdjęcia o wielu różnych szerokościach, które ładuję tylko z informacją o wysokości. Ustawienie szerokości umożliwia przeglądarce rozciąganie i ściskanie obrazu. Rozwiązuję ten problem poprzez wyśrodkowanie linii tekstu tuż przed linią image_tag (również pozbywając się float: left;). Chciałbym, żeby tekst był wyrównany do lewej, ale jest to drobna niedogodność, którą mogę tolerować.

MDM
źródło

0

Dodaj text-align: center;do tagu nadrzędnego o <canvas>. Otóż to.

Przykład:

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

Raj Yadav
źródło

jest to proste wtedy przy użyciu css

Clifton Avil D'Souza

Jak wyśrodkować płótno w HTML5

Odpowiedzi: