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

105

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

html canvas css resize Йорген
источник

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

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

Клифтон

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

Пэм Стумс

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

Ответы: