Я хотел бы сделать прямоугольный холст, чтобы имитировать индикатор выполнения но кажется, что когда я устанавливаю ширину и высоту холста до 100%, это не делает его столь же высоким и широким, как родительский
см. пример ниже
http://jsfiddle.net/PQS3A/
Можно ли сделать не квадрат холста? Я не хочу жестко задавать высоту и ширину холста, потому что он должен динамически меняться при просмотре на большем или меньшем экране, включая мобильные устройства.
Вот рабочий пример, устраняющий проблемы:
У вас было несколько проблем с вашим примером:
<div> не имеет атрибутов height или width. Вы должны установить их через CSS.position:static, что означает, что он НЕ является родителем позиционирования для любых детей. Если вы хотите, чтобы холст был того же размера, что и div, вы должны установить div на position:relative (или absolute или fixed).width и height на Canvas определяют количество пикселей данных для рисования (например, фактические пиксели в изображении) и отдельно от размера экрана холста. Эти атрибуты должны быть установлены в целые числа.В приведенном выше примере используется 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;
}
Используйте атрибуты width и 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.
Используйте свойства CSS вместо атрибутов в тегах:
<div style="background-color:blue;width:140px;height:20px">
<canvas style="background-color: red;width:100%;height:100%">
</canvas>
</div>