Блог

У меня есть 2 холста, один использует атрибуты HTML width и height для его определения размера, другой использует CSS:

 <canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>
 

Compteur1 отображается так, как должно, но не compteur2. Содержимое рисуется с помощью JavaScript на холсте 300х300.

Почему существует разница в отображении?

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

Это объясняется в спецификации HTML:

canvas Элемент имеет два атрибута для управления размером растрового изображения элемента: width и height . Эти атрибуты, если они указаны, должны иметь значения, которые являются допустимыми неотрицательными целыми числами. Для получения их числовых значений необходимо использовать правила синтаксического анализа неотрицательных целых чисел. Если атрибут отсутствует или если анализ его значения возвращает ошибку, то вместо него необходимо использовать значение по умолчанию. Значение width атрибута по умолчанию равно 300, а значение height атрибута по умолчанию равно 150.

Чтобы установить width и height вам нужно, вы можете использовать

 canvasObject.setAttribute('width', '475');
 

Для <canvas> элементов правила CSS width определяют и height устанавливают фактический размер элемента canvas, который будет отображаться на странице. С другой стороны, HTML-атрибуты width и height задают размер системы координат или «сетки», которую будет использовать API canvas.

Например, рассмотрим это (jsfiddle):

 var ctx = document.getElementById('canvas1').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30); 

 canvas {
  border: 1px solid black;
} 

 <canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas> 

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

Примечание: Если правила CSS для width и/или height не указаны, браузер будет использовать атрибуты HTML для определения размера элемента таким образом, чтобы 1 единица этих значений равнялась 1 пикселю на странице. Если эти атрибуты не указаны, то по умолчанию они будут иметь значения a width of 300 и a height of 150 .

Холст будет растянут, если вы зададите ширину и высоту в своем CSS. Если вы хотите динамически управлять размером холста, вы должны использовать JavaScript следующим образом:

 canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');
 

Браузер использует ширину и высоту css, но элемент canvas масштабируется в зависимости от ширины и высоты холста. В javascript прочитайте ширину и высоту css и установите для них ширину и высоту холста.

 var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();
 

Поправка Шеннимала

 var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))
 

CSS задает ширину и высоту элемента canvas, чтобы он влиял на пространство координат, оставляя все нарисованное искаженным

Вот мой способ, как установить ширину и высоту с помощью ванильного JavaScript

 canvas.width = numberForWidth

canvas.height = numberForHeight
 

холст отображает изображение буфером, поэтому при указании атрибутов html ширины и высоты размер и длина буфера меняются, но при использовании css размер буфера остается неизменным. делая изображение растянутым.

Использование размера html.

размер холста изменен -> размер буфера изменен ->> визуализация

Использование размера css

размер холста изменяется -> визуализация

поскольку длина буфера остается неизменной, при отображении изображения в контексте изображение отображается на холсте с измененным размером (но отображается в неизмененном буфере).

Если вам нужно динамическое поведение, основанное, например, на CSS-медиа-запросах, не используйте атрибуты ширины и высоты холста. Используйте правила CSS, а затем, перед получением контекста рендеринга холста, назначьте атрибутам ширины и высоты стили ширины и высоты CSS:

 var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...