Можно ли исправить ширину и высоту элемента canvas HTML5?
Обычный способ следующий:
<canvas id="canvas" width="300" height="300"></canvas>
Свободный перевод вопроса Canvas width and height in HTML5 от участника @Dustin.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуМожно ли исправить ширину и высоту элемента canvas HTML5?
Обычный способ следующий:
<canvas id="canvas" width="300" height="300"></canvas>
Свободный перевод вопроса Canvas width and height in HTML5 от участника @Dustin.
Элемент 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);
для обработки тех браузеров, которые не полностью очищают холст. Вам нужно будет перерисовать любой контент, который вы хотели отображать после изменения размера.
Обратите внимание, что высота и ширина являются логическими размерами холста, используемыми для рисования, и отличаются от атрибутов CSS style.height
и style.width
. Если вы не установите атрибуты CSS, внутренний размер холста будет использоваться в качестве размера его отображения; если вы установите атрибуты CSS, и они будут отличаться от размеров холста, ваш контент будет масштабирован в браузере. Например:
// Создайте холст с размытым пиксельным увеличением (zoom-in)
// с каждым нарисованным пикселем холста, отображаемым на экране примерно как 2x2
canvas.width = 400;
canvas.height = 300;
canvas.style.width = '800px';
canvas.style.height = '600px';
Посмотрите этот пример холста, увеличенного в 4 раза.
var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
ctx.lineWidth = 1;
ctx.strokeStyle = '#f00';
ctx.fillStyle = '#eff';
ctx.fillRect( 10.5, 10.5, 20, 20 );
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.fillRect( 40, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.fillRect( 70, 10, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );
ctx.strokeStyle = '#fff';
ctx.strokeRect( 10.5, 10.5, 20, 20 );
ctx.strokeRect( 40, 10.5, 20, 20 );
ctx.strokeRect( 70, 10, 20, 20 );
body { background:#eee; margin:1em; text-align:center }
canvas { background:#fff; border:1px solid #ccc; width:400px; height:160px }
<canvas width="100" height="40"></canvas>
<p>Показано, что повторное рисование тех же линий со сглаживанием не стирает старые линии со сглаживанием.</p>
canvas
объявляет день открытых дверей)) Было интересно, ждем следующих выпусков!