Ширина и высота холста в HTML5


182

Можно ли исправить ширину и высоту canvasэлемента HTML5 ?

Обычный способ заключается в следующем:

<canvas id="canvas" width="300" height="300"></canvas>

Ответы:


381

canvasЭлемент DOM имеет .heightи .widthсвойства , которые соответствуют height="…"и width="…"атрибутов. Установите для них числовые значения в коде JavaScript, чтобы изменить размер холста. Например:

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 800;
canvas.height = 600;

Обратите внимание, что это очищает холст, хотя вы должны следовать ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);тем браузерам, которые не полностью очищают холст. Вам нужно будет перерисовать любой контент, который вы хотели отобразить после изменения размера.

Также обратите внимание, что высота и ширина являются логическими размерами холста, используемыми для рисования, и отличаются от атрибутов style.heightи style.widthCSS. Если вы не установите атрибуты CSS, внутренний размер холста будет использоваться в качестве размера его отображения; если вы установите атрибуты CSS, и они будут отличаться от размеров холста, ваш контент будет масштабироваться в браузере. Например:

// Make a canvas that has a blurry pixelated zoom-in
// with each canvas pixel drawn showing as roughly 2x2 on screen
canvas.width  = 400;
canvas.height = 300; 
canvas.style.width  = '800px';
canvas.style.height = '600px';

Посмотрите на этот живой пример холста, увеличенного в 4 раза.


1
@Hazaart Если вы хотите установить их по-другому: $('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});если вы хотите, чтобы визуальный размер был таким же, как размер пикселя, никогда не устанавливайте стили, только атрибуты.
Phrogz

1
«Если вы хотите, чтобы визуальный размер соответствовал размеру пикселя, никогда не устанавливайте стили, только атрибуты», есть ли причина для этого предпочтения? Если у меня на холсте много объектов и я хочу увеличить / уменьшить масштаб, было бы намного быстрее просто сбросить css, нет? (Вместо того, чтобы перебирать все объекты) ...
EnglishAdam

3
@Gamemorize: масштабирование с помощью CSS делает его размытым. Тем не менее, вы можете масштабировать с помощью масштабирования контекста и перевода между перерисовками вместо изменения «размера» каждого объекта.
Phrogz

1
Спасибо большое. Теперь я вижу, что делает CSS ... он обрабатывает холст «как» изображение, масштабирование изображения явно не так хорошо, как «перерисовывание» его!
Английский

3
Кроме того, теперь вы можете делать «чистое пиксельное увеличение» вместо «размытого пиксельного увеличения», по крайней мере в Chrome, используя стиль «рендеринг изображения: пикселированный» на холсте. Я поиграл с твоей скрипкой, чтобы показать разницу: jsfiddle.net/donhatch/9bheb/1663
Дон Хэтч

62

Холст имеет 2 размера, размерность пикселей в холсте (это backingstore или DrawingBuffer) и размер экрана. Количество пикселей устанавливается с помощью атрибутов canvas. В HTML

<canvas width="400" height="300"></canvas>

Или в JavaScript

someCanvasElement.width = 400;
someCanvasElement.height = 300;

Отдельно от этого находятся ширина и высота стиля CSS холста.

В CSS

canvas {  /* or some other selector */
   width: 500px;
   height: 400px;
}

Или в JavaScript

canvas.style.width = "500px";
canvas.style.height = "400px";

Возможно, лучший способ сделать холст 1x1 пикселей ВСЕГДА ИСПОЛЬЗОВАТЬ CSS, чтобы выбрать размер, а затем написать небольшой кусочек JavaScript, чтобы количество пикселей соответствовало этому размеру.

function resizeCanvasToDisplaySize(canvas) {
   // look up the size the canvas is being displayed
   const width = canvas.clientWidth;
   const height = canvas.clientHeight;

   // If it's resolution does not match change it
   if (canvas.width !== width || canvas.height !== height) {
     canvas.width = width;
     canvas.height = height;
     return true;
   }

   return false;
}

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

Вот полный холст окна:

А вот холст как поплавок в абзаце

Вот холст в значительной панели управления

вот холст в качестве фона

Поскольку я не устанавливал атрибуты, единственное, что изменилось в каждом образце - это CSS (насколько это касается холста)

Ноты:

  • Не помещайте границы или отступы на элемент canvas. Вычисление размера для вычитания из числа измерений элемента является проблематичным

Лучший ответ, этот фрагмент должен быть стандартным методом DOM canvas.
Ржавая бумага

23

Большое спасибо! Наконец я решил проблему с размытыми пикселями с помощью этого кода:

<canvas id="graph" width=326 height=240 style='width:326px;height:240px'></canvas>

С добавлением «полупикселя» трюк для размытия линий.


26
@UpTheCreek Если вы рисуете линию на холсте, она выглядит медленнее, чем если бы она была размытой. Поместив линии на половину пикселей (скажем, 50,5 вместо 50), вы получите красивую, чистую линию. Это часто делается с помощью ctx.translate (0.5, 0.5) в самом начале вашего кода, поэтому вы можете забыть об этом позже
Johan

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.