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

Question

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

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

Answer 1

Возможно, стоит взглянуть на учебник: Учебник по Firefox Canvas

Вы можете получить ширину и высоту элемента canvas, просто перейдя к этим свойствам элемента. Например:

var canvas = document.getElementById('mycanvas');
var width = canvas.width;
var height = canvas.height;

Контекст - это объект, который вы получаете с холста, чтобы позволить вам рисовать в нем.

Answer 2

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

Лучшее решение (поддерживается большинством браузеров, но я не проверял Safari):

var canvas = document.getElementById('mycanvas');
var width = canvas.scrollWidth;
var height = canvas.scrollHeight;

По крайней мере, я получаю правильные значения с scrollWidth и -Height, и ДОЛЖЕН устанавливать canvas.width и height при его изменении.

Answer 3

Ответы с упоминанием 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">

Answer 4

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

Если вы хотите получить ширину и высоту, вы можете просто использовать стандартные атрибуты HTML width и height:

var canvas = document.getElementById( 'yourCanvasID' );
var ctx = canvas.getContext( '2d' );

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

Answer 5

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

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

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

посмотрите на этот краткий пример другого размера , где я поместил холст 200/200 в HTML-элемент 300/100

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

Answer 6

Никто из них не работал для меня. Попробуйте это.

console.log($(canvasjQueryElement)[0].width)

Answer 7

У меня была проблема, потому что мой холст был внутри контейнера без идентификатора, поэтому я использовал этот код jquery ниже

$('.cropArea canvas').width()