я хотів би зробити прямокутне полотно для імітації індикатора прогресу, але, здається, коли я встановлюю ширину та висоту полотна на 100%, це насправді не робить його таким високим і таким широким, як батьківський
див. приклад нижче
http://jsfiddle.net/PQS3A/
Чи можна взагалі зробити полотно без квадрата? Я не хочу жорстко кодувати висоту та ширину полотна, оскільки воно має динамічно змінюватися при перегляді на більшому чи меншому екрані, включаючи мобільні пристрої
Відповіді:
Ось робочий приклад виправлення проблем:
У вас було кілька проблем із вашим прикладом:
<div>Не має heightабо widthатрибути. Вам потрібно встановити їх за допомогою CSS.position:static, а це означає, що він НЕ є батьківським позиціонуванням будь-яких дітей. Якщо ви хочете, щоб полотно було такого самого розміру, як div, ви повинні встановити для div значення position:relative(або absoluteабо fixed).widthта heightатрибути на полотні вказати кількість пікселів даних , щоб привернути до (наприклад , фактичні пікселів в зображенні), і відокремлені від розміру дисплея полотна. Ці атрибути повинні мати цілі числа.У наведеному вище прикладі використовується CSS, щоб встановити розмір div та зробити його позиціонованим батьком. Він створює функцію JS (показано нижче), щоб обидва встановити для полотна такий самий розмір дисплея, як його позиціонований батько, а потім регулює внутрішні widthта heightвластивості таким чином, що має таку ж кількість пікселів, як показано.
var canvas = document.querySelector('canvas');
fitToContainer(canvas);
function fitToContainer(canvas){
// Make it visually fill the positioned parent
canvas.style.width ='100%';
canvas.style.height='100%';
// ...then set the internal size to match
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
display:blockта не мають widthвказаного CSS, розширюються, щоб бути настільки ж широкими, як їх контейнер. Елементи контейнера без heightзазначеного CSS мають висоту лише стільки, скільки їх вміст; вміст, який має відсоток зростання, еквівалентний вмісту, height:0коли справа доходить до батьків, щоб з’ясувати, якого зросту він повинен бути. Кожного разу, коли ви використовуєте абсолютне розміщення або відсоткові розміри, вони обчислюються відносно "батьківського зміщення"; за замовчуванням основним елементом компенсації є тіло.
position:static(значення за замовчуванням та поведінка всіх елементів), не запускають нову систему позиціонування, але position:relativeроблять (без іншої зміни відображення елемента). Наприклад, дивіться це демо . Зверніть увагу на те, як #a1розміщено та розмірено по відношенню до тіла, ігноруючи його вміст <div>. Зверніть увагу, як #b1замість цього розміщено та розмір щодо його контейнера, з єдиною різницею між ними #b { position:relative}.
Використовуйте атрибути widthand heightі полотна, якщо ви хочете, щоб воно насправді було таким самим, як батьківський елемент. Ви можете встановити їх за допомогою JQuery .
$(document).ready(function() {
var canvas = document.getElementById("theCanvas");
canvas.width = $("#parent").width();
canvas.height = $("#parent").height();
});
Якщо ви не знаєте JQuery , скористайтеся таким Javascript:
var canvas = document.getElementById("theCanvas");
var parent = document.getElementById("parent");
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;
Якщо ви використовуєте cssатрибути висоти та ширини style="width:100%; height:100%;", тоді ви просто розтягуєте полотно. Це призведе до того, що все, що ви намалюєте на полотні, буде виглядати розтягнутим.
JSFiddle для рішення JQuery.
JSFiddle для рішення Javascript.
style=""атрибут на батьківському елементі або не використовуєте JS для встановлення стилю. Ви повинні використовувати getComputedStyle()або, як я зробив у своїй відповіді, offsetWidth/ offsetHeight.
Використовуйте властивості CSS замість атрибутів тегів:
<div style="background-color:blue;width:140px;height:20px">
<canvas style="background-color: red;width:100%;height:100%">
</canvas>
</div>