Как получить ширину и высоту холста HTML5?

Question

Как получить ширину и высоту холста HTML5?

Как я могу получить ширину и высоту элемента canvas в JavaScript?

кроме того, каков "контекст" холста, о котором я продолжаю читать?

605 6

javascript html5 canvas

6 ответов:

Comments

Ничего не найдено.

andrewmu · Accepted Answer · 2013-12-03 11:22:29

возможно, стоит посмотреть учебник: Firefox Холст Учебник

вы можете получить ширину и высоту элемента canvas просто путем доступа к этим свойствам элемента. Например:
var canvas = document.getElementById('mycanvas');
var width = canvas.width;
var height = canvas.height;
контекст-это объект вы получаете от холста, чтобы позволить вам сделать это.

Bitterblue · Accepted Answer · 2012-12-14 15:04:51

Ну, все ответы до этого не совсем корректны. 2 из основных браузеров не поддерживают эти 2 свойства (IE является одним из них) или используют их по-разному.

лучшее решение (поддерживается большинством браузеров, но я не проверял Safari):
var canvas = document.getElementById('mycanvas');
var width = canvas.scrollWidth;
var height = canvas.scrollHeight;
по крайней мере, я получаю правильные значения с шириной прокрутки и высотой и должен установить холст.ширина и высота при изменении размера.

Harmen · Accepted Answer · 2011-09-25 17:35:25

объект контекста позволяет вам манипулировать холстом; вы можете рисовать прямоугольники, например, и многое другое.

Если вы хотите получить ширину и высоту, вы можете просто использовать стандартные атрибуты HTML width и height:
var canvas = document.getElementById( 'yourCanvasID' );
var ctx = canvas.getContext( '2d' );

alert( canvas.width );
alert( canvas.height ); 

Dan Dascalescu · Accepted Answer · 2015-07-03 01:56:15

ответы упомянув canvas.width возвращает внутренние размеры холста, т. е. те, которые указаны при создании элемента:
<canvas width="500" height="200">
если вы определяете размер холста с помощью CSS, его размеры DOM доступны через .scrollWidth и .scrollHeight:
var canvasElem = document.querySelector('canvas');
document.querySelector('#dom-dims').innerHTML = 'Canvas DOM element width x height: ' +
      canvasElem.scrollWidth +
      ' x ' +
      canvasElem.scrollHeight

var canvasContext = canvasElem.getContext('2d');
document.querySelector('#internal-dims').innerHTML = 'Canvas internal width x height: ' +
      canvasContext.canvas.width +
      ' x ' +
      canvasContext.canvas.height;

canvasContext.fillStyle = "#00A";
canvasContext.fillText("Distorted", 0, 10);
<p id="dom-dims"></p>
<p id="internal-dims"></p>
<canvas style="width: 100%; height: 123px; border: 1px dashed black">

halfbit · Accepted Answer · 2015-02-02 18:50:55

теперь начиная с 2015 года все (майор?) браузеры, кажется, обсыпать c.width и c.height чтобы получить полотно внутренние размер, но:

вопрос, поскольку ответы являются missleading, потому что холст имеет в принципе 2 разных/независимых размера.

"html" позволяет сказать CSS width / height и его собственный (атрибут-) width / height

смотреть на это короткий пример различных размеров, где я положил 200/200 холст в 300/100 html-элемент

в большинстве примеров (все, что я видел) нет набора css-size, поэтому они получают implizit ширину и высоту (чертежного) размера холста. Но это не обязательно, и может привести к забавным результатам, если вы берете неправильный размер - т. е. css widht / height для внутреннего позиционирования.

Brian Sanchez · Accepted Answer · 2017-07-25 19:45:05

У меня была проблема, потому что мой холст был внутри контейнера без ID, так что я использовал этот код jQuery ниже
$('.cropArea canvas').width()