Сделать холст настолько широким и высоким, как родительский

Я хотел бы сделать прямоугольный холст, чтобы имитировать индикатор выполнения но кажется, что когда я устанавливаю ширину и высоту холста до 100%, это не делает его столь же высоким и широким, как родительский

см. пример ниже
http://jsfiddle.net/PQS3A/

Можно ли сделать не квадрат холста? Я не хочу жестко задавать высоту и ширину холста, потому что он должен динамически меняться при просмотре на большем или меньшем экране, включая мобильные устройства.

Ответы

Ответ 1

Вот рабочий пример, устраняющий проблемы:

http://jsfiddle.net/PQS3A/7/

У вас было несколько проблем с вашим примером:

  • A <div> не имеет атрибутов height или width. Вы должны установить их через CSS.
  • Даже если размер div был правильно установлен, он использовал значение по умолчанию 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;
}

Ответ 2

Используйте атрибуты 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.

Ответ 3

Используйте свойства CSS вместо атрибутов в тегах:

<div style="background-color:blue;width:140px;height:20px">
    <canvas style="background-color: red;width:100%;height:100%">
    </canvas>
</div>​

Это похоже на работу