Mach die Leinwand so breit und so hoch wie die Eltern

Ich möchte eine rechteckige Leinwand erstellen, um einen Fortschrittsbalken zu simulieren, aber wenn ich die Breite und Höhe einer Leinwand auf 100% setze, ist sie anscheinend nicht so hoch und breit wie die übergeordnete

siehe Beispiel unten
http://jsfiddle.net/PQS3A/

Ist es überhaupt möglich, nicht quadratische Leinwand herzustellen? Ich möchte die Höhe und Breite der Leinwand nicht fest codieren, da sie sich dynamisch ändern sollte, wenn sie auf einem größeren oder kleineren Bildschirm angezeigt wird, einschließlich mobiler Geräte

Hier ist ein Arbeitsbeispiel zur Behebung der Probleme:

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

Sie hatten mehrere Probleme mit Ihrem Beispiel:

1. A <div>hat keine heightoder widthAttribute. Sie müssen diese über CSS festlegen.
2. Selbst wenn die Größe des Div korrekt war, wurde die Standardeinstellung verwendet position:static, was bedeutet, dass es NICHT das positionierende Elternteil eines Kindes ist. Wenn die Zeichenfläche dieselbe Größe wie das div haben soll, müssen Sie das div auf position:relative(oder absoluteoder fixed) setzen.
3. Die Attribute widthund heightauf einem Canvas geben die Anzahl der zu zeichnenden Datenpixel an (wie die tatsächlichen Pixel in einem Bild) und sind von der Anzeigegröße des Canvas getrennt. Diese Attribute müssen auf Ganzzahlen gesetzt werden.

In dem oben verlinkten Beispiel wird CSS verwendet, um die Div-Größe festzulegen und sie zu einem positionierten übergeordneten Element zu machen. Es erstellt eine JS-Funktion (siehe unten), mit der eine Zeichenfläche auf die gleiche Anzeigegröße wie das positionierte übergeordnete Element festgelegt wird. Anschließend werden die internen widthund heightEigenschaften so angepasst, dass sie die gleiche Anzahl von Pixeln aufweisen, wie sie angezeigt werden.

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;
}

Verwenden Sie die Attribute widthund heightder Zeichenfläche, wenn Sie möchten, dass sie tatsächlich so groß wie das übergeordnete Element ist. Sie können sie mit JQuery festlegen .

$(document).ready(function() {
  var canvas = document.getElementById("theCanvas");
  canvas.width = $("#parent").width();
  canvas.height = $("#parent").height();
});

Wenn Sie JQuery nicht kennen , verwenden Sie das folgende Javascript:

var canvas = document.getElementById("theCanvas");
var parent = document.getElementById("parent");
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

Wenn Sie die cssAttribute height und width verwenden, style="width:100%; height:100%;"strecken Sie nur die Leinwand. Dadurch wirkt alles, was Sie auf die Leinwand zeichnen, gestreckt.

JSFiddle für JQuery-Lösung.

JSFiddle für Javascript-Lösung.

Verwenden Sie CSS-Eigenschaften anstelle von Attributen für die Tags:

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

Das scheint zu funktionieren