#javascript #css #html #canvas
#javascript #css #HTML #холст
Вопрос:
У меня есть два блока холста, один из которых имеет встроенные атрибуты, а другой — CSS.
HTML:
<canvas id="canv_in" width="400" height="400"> </canvas>
<canvas id="canv_ss"> </canvas>
CSS:
canvas {
background-color : rgba(200, 200, 200, 0.5);
}
#canv_ss {
width : 400px;
height: 400px;
}
Оба холста имеют одинаковые размеры, но когда я пытаюсь нарисовать один и тот же прямоугольник в обоих из них, я получаю другой результат. Вот js:
var canvasElems = document.getElementsByTagName("canvas");
var canvasContext;
for(i = 0; i < canvasElems.length; i) {
canvasContext = canvasElems[i].getContext("2d");
canvasContext.fillStyle = "rgba(0, 0, 225, 1.0)";
canvasContext.fillRect(120, 10, 150, 150);
}
Вот результат:
Итак, мой вопрос: как нам изменить размер прямоугольника по назначению, сохранив стили моих элементов в CSS? Разве это невозможно? Почему прямоугольник справа ведет себя странно?
Комментарии:
1. Второй имеет размеры по умолчанию. Затем он масштабируется / растягивается (неравномерно) до 400×400. Вы можете установить количество пикселей на холсте либо (a) с помощью атрибутов width / height в html, либо с помощью атрибутов width / height в JS. Для чего это стоит — в вашем первом не применяются встроенные стили — это атрибуты холста, а не атрибуты его стиля.
2. Интересно, поэтому мне всегда следует избегать изменения размера
canvasв css?3. Зависит от ваших потребностей. Я часто изменяю его в css (например, width: 100%), затем запрашиваю у элемента его размер на экране в JS, а затем устанавливаю его размеры в пикселях в соответствии с пространством, которое он занимает на экране. Для каждого способа определенно есть применение (атрибуты объекта против атрибутов css).
Ответ №1:
Атрибут width по умолчанию 300px имеет значение, а height 150px — значение . Добавление таблицы стилей к элементу просто масштабирует поле до этого размера и не расширяет пространство координат.
Размер элемента canvas может быть произвольным с помощью таблицы стилей, его растровое изображение затем подчиняется свойству CSS ‘object-fit’.
Внутренние размеры элемента canvas, когда он представляет внедренный контент, равны размерам растрового изображения элемента.
HTML Атрибуты ( width и height ) устанавливают размеры холста, которые определяют, как объекты измеряются на холсте.
Стиль CSS задает размер отображения холста, который определяет размеры холста в браузере. Если размер отображения отличается от размеров, холст будет растягиваться при рисовании.
Когда элемент холста представляет внедренное содержимое, он предоставляет источник рисования, ширина width которого height является внутренней для элемента , внутренняя высота элемента и внешний вид которого является растровым изображением элемента.
Всякий width height раз, когда атрибуты и содержимого устанавливаются, удаляются, изменяются или избыточно устанавливаются в значение, которое у них уже есть, если включен режим контекста холста direct-2d , агент пользователя должен установить размеры растрового изображения в числовые значения атрибутов содержимого width и height .
Атрибуты width и height IDL должны отражать соответствующие атрибуты содержимого с одинаковыми именами и одинаковыми значениями по умолчанию.
Заключение
Существует разница между размерами холста и размером отображения холста.
Если вы определяете только размеры, они также будут использоваться в качестве размера отображения, т. Е. Холст рисуется в масштабе 1: 1.
Если вы определяете только размер отображения, размеры получат значение по умолчанию 300, умноженное на 150.