Ширина та висота полотна в HTML5


181

Чи можливо зафіксувати ширину та висоту canvasелемента HTML5 ?

Звичайний спосіб такий:

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

Відповіді:


380

Елемент canvasDOM має .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'});Якщо ви хочете, щоб розмір візуалу був таким самим, як розмір пікселів, ніколи не встановлюйте стилі, а лише атрибути.
Фрогз

1
"Якщо ви хочете, щоб розмір візуалу був таким самим, як розмір пікселя, ніколи не встановлюйте стилі, а лише атрибути", чи є причина цього переваги? Якщо у мене є багато об'єктів в полотні , і я хочу ZoomIn / ZoomOut, було б набагато швидше , щоб просто скинути CSS, немає (а не прохідний всі об'єкти) ...?
EnglishAdam

3
@Gamemorize: масштабування за допомогою CSS робить розмитим. Однак ви можете збільшувати масштаб за допомогою контекстного масштабування та перекладу між перемальовуванням, а не змінювати "розмір" кожного об'єкта.
Фрогз

1
Thx високо цінується. Зараз я бачу, що робить CSS ... він обробляє полотно "як" зображення, масштабування зображення очевидно не настільки добре, як "перемальовування" його!
АнглійськаАдам

3
Крім того, тепер ви можете робити "очистити нерівне збільшення масштабу" замість "розмитого нерівного масштабування", принаймні на Chrome, використовуючи стиль "зображення-рендерінг: піксельне" на полотні. Я розкрив вашу загадку, щоб показати різницю: jsfiddle.net/donhatch/9bheb/1663
Дон Хетч

62

Полотно має 2 розміри, розмір пікселів на полотні (це резервна копія чи малюнок Buffer) та розмір дисплея. Кількість пікселів встановлюється за допомогою атрибутів 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 (що стосується полотна)

Примітки:

  • Не накладайте бордюри та прокладки на елемент полотна. Обчислити розмір, який потрібно відняти від кількості розмірів елемента, складно

Найкраща відповідь, цей фрагмент повинен бути стандартним методом полотна DOM.
іржавий папір

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) на самому початку коду, щоб потім про нього забути
Йоган

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.