Как центрировать холст в html5

105

Я уже какое-то время искал решение, но ничего не нашел. Может это просто мои поисковые запросы. Ну, я пытаюсь сделать центр холста по размеру окна браузера. Размер холста 800х600. И если размер окна становится меньше 800x600, его размер тоже должен измениться (но на данный момент это не очень важно).

— Йорген
источник

Как мне сказать ему сделать холст на всю страницу без указания размеров и без полос прокрутки при изменении размера?

— jorgen

2

Не делайте этого в HTML ... делайте это с помощью javascript, используйте такие вещи, как appendChild или что-то в этом роде, и установите ширину и высоту в window.innerWidth и window.innerHeight

— JinX

173

Задайте холсту следующие свойства стиля css:

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

редактировать

Поскольку этот ответ довольно популярен, позвольте мне добавить немного подробностей.

Вышеуказанные свойства будут горизонтально центрировать холст, div или любой другой узел, который у вас есть относительно его родителя. Нет необходимости изменять верхнее или нижнее поля и отступы. Вы указываете ширину и позволяете браузеру заполнить оставшееся пространство автоматическими полями.

Однако, если вы хотите печатать меньше, вы можете использовать любые сокращенные свойства css, которые захотите, например

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

Однако центрирование полотна по вертикали требует другого подхода. Вам нужно использовать абсолютное позиционирование и указать ширину и высоту. Затем установите для свойств left, right, top и bottom значение 0 и позвольте браузеру заполнить оставшееся пространство автоматическими полями.

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

Холст будет центрироваться на основе первого родительского элемента, для которого positionустановлено значение relativeилиabsolute , или тела, если ничего не найдено.

Другой подход - использовать display: flex, доступный в IE11.

Кроме того, убедитесь, что вы используете последний тип документа, например xhtml или html 5.

— Марко Луглио
источник

8

дисплей: блок; и маржа: 0 авто 0 авто; тоже достаточно. Спасибо!

— Крис

Для вертикального центрирования холста вам не нужно указывать ширину и высоту, если вы укажете это в HTML. Во всяком случае, на хроме.

— Zac

1

Ширина и высота могут быть указаны в css или html. Но css - рекомендуемый способ, так как вся логика представления должна идти туда.

— Marco Luglio

1

Он центрирует холст, но если на холсте нарисовано изображение, оно растягивается. Сможете ли вы центрировать холст, не растягивая изображение?

— Ариан

Установка высоты и ширины во встроенных стилях в элементе холста испортила размеры моих нарисованных изображений и тому подобное. Просто предостережение, которое, надеюсь, избавит кого-то от разочарования.

— MrBoJangles

52

Вы можете присвоить своему холсту свойства ff CSS:

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

— джинмайкл
источник

Можете ли вы предоставить jsfiddle? Этот подход, похоже, не работает

— jose.angel.jimenez

3

Это работает для горизонтального центрирования, но не для вертикального центрирования.

— Matty J

20

Просто центрируйте div в HTML:

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


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

Просто измените высоту и ширину на любые, и у вас будет центрированный div

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

— JoeCianflone
источник

К счастью, мне это понадобилось вскоре после того, как вы его разместили. :)

— mcandre

5

Это не работает, если холст меньше контейнера.

— SystemicPlural

8

Чтобы центрировать элемент холста по горизонтали, вы должны указать его как уровень блока и оставить браузеру свойства левого и правого полей:

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

Если вы хотите центрировать его по вертикали, элемент холста должен быть абсолютно позиционирован:

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

Если вы хотите центрировать его по горизонтали и вертикали, выполните:

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

Для получения дополнительной информации посетите: https://www.w3.org/Style/Examples/007/center.en.html.

— Конкрет
источник

5

Приведенные выше ответы работают, только если ваш холст такой же ширины, как и контейнер.

Это работает независимо:

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

Развернуть фрагмент

— Системный
источник

3

Используйте этот код:

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

— Кейер Патель
источник

2

У меня была та же проблема, так как у меня есть изображения разной ширины, которые я загружаю только с информацией о высоте. Установка ширины позволяет браузеру растягивать и сжимать изображение. Я решаю проблему, располагая текстовую строку непосредственно перед строкой image_tag по центру (также избавляясь от float: left;). Я бы хотел, чтобы текст был выровнен по левому краю, но это незначительное неудобство, с которым я могу мириться.

— MDM
источник

1

Добавить text-align: center;в родительский тег из <canvas>. Вот и все.

Пример:

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

— Радж Ядав
источник

это просто, а затем использовать css

— Клифтон

простейший и решил мою проблему. лучший ответ на мой взгляд.

— Пэм Стумс