Ответы:
canvas
Элемент 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);
тем браузерам, которые не полностью очищают холст. Вам нужно будет перерисовать любой контент, который вы хотели отобразить после изменения размера.
Также обратите внимание, что высота и ширина являются логическими размерами холста, используемыми для рисования, и отличаются от атрибутов style.height
и style.width
CSS. Если вы не установите атрибуты 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 раза.
Холст имеет 2 размера, размерность пикселей в холсте (это backingstore или DrawingBuffer) и размер экрана. Количество пикселей устанавливается с помощью атрибутов 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 (насколько это касается холста)
Ноты:
Большое спасибо! Наконец я решил проблему с размытыми пикселями с помощью этого кода:
<canvas id="graph" width=326 height=240 style='width:326px;height:240px'></canvas>
С добавлением «полупикселя» трюк для размытия линий.
Лучший способ сделать это:
<canvas id="myChart" style="height: 400px; width: 100px;"></canvas>
$('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});
если вы хотите, чтобы визуальный размер был таким же, как размер пикселя, никогда не устанавливайте стили, только атрибуты.