2.2 KiB
title | localeTitle |
---|---|
Canvas Dimensions | Размеры холста |
Размеры холста
Атрибуты width
и height
будут определять размер холста. Эти атрибуты управляют размером холста чертежа, а не фактическим отображаемым размером.
См. Демонстрацию размеров полотна Pen Alan Luo ( @alanluo ) на CodePen .
В приведенном выше перо оба элемента canvas
имеют одинаковые размеры, установленные через CSS. Тем не менее, в два раза больше высоты, установленной через атрибут height
, что приводит к тому, что один и тот же прямоугольник становится отображаемым на половине высоты.
Это может вызвать проблемы, когда вы хотите создать холст с динамическим размером. Для instnace вы можете сделать полноэкранный холст или использовать холст в виде миниатюры.
Чтобы размер контекста рисования соответствовал визуализированному размеру элемента canvas
, мы должны заставить его в реальном времени. Одной из распространенных практик является включение в обработчик onResize
следующего обработчика.
// somewhere early in the script
var canvas = document.getElementById("canvas");
...
window.addEventListener("resize", function() {
canvas.setAttribute("width", canvas.scrollWidth);
canvas.setAttribute("height", canvas.scrollHeight);
console.log(canvas.offsetWidth);
});