Canvas wird gestreckt, wenn CSS verwendet wird, aber normal mit den Attributen “width” und “height”.

Ich habe 2 Leinwände, eine verwendet HTML-Attribute width Und height Um es zu dimensionieren, verwendet der andere CSS:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1 wird so angezeigt, wie es sollte, aber nicht compteur2. Der Inhalt wird mit JavaScript auf einer 300×300-Leinwand gezeichnet.

Warum gibt es einen Anzeigeunterschied?

Es scheint, dass die width Und height -Attribute bestimmen die Breite oder Höhe des Koordinatensystems der Leinwand, während die CSS-Eigenschaften nur die Größe der Box bestimmen, in der sie angezeigt wird.

Dies wird in der erklärt HTML-Spezifikation:

Der canvas element hat zwei Attribute, um die Größe der Bitmap des Elements zu steuern: width Und height. Diese Attribute müssen, wenn angegeben, Werte haben, die sind gültige nicht negative ganze Zahlen. Der Regeln zum Analysieren nicht negativer Ganzzahlen müssen verwendet werden, um ihre numerischen Werte zu erhalten. Wenn ein Attribut fehlt oder die Analyse seines Werts einen Fehler zurückgibt, muss stattdessen der Standardwert verwendet werden. Der width Attribut standardmäßig auf 300 und die height Attribut standardmäßig auf 150.

Zum Einstellen der width Und height Auf einer Leinwand können Sie Folgendes verwenden:

canvasObject.setAttribute('width', '150');
canvasObject.setAttribute('height', '300');

Für <canvas> Elemente, die CSS-Regeln für width Und height Legen Sie die tatsächliche Größe des Canvas-Elements fest, das auf die Seite gezeichnet wird. Andererseits sind die HTML-Attribute von width Und height Legen Sie die Größe des Koordinatensystems oder „Rasters“ fest, das die Canvas-API verwenden wird.

Betrachten Sie zum Beispiel dies (jsfiddle):

var ctx = document.getElementById('canvas1').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30);

canvas {
  border: 1px solid black;
}

<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

Auf beiden wurde das Gleiche relativ zu den internen Koordinaten des Canvas-Elements gezeichnet. Aber im zweiten Canvas ist das rote Rechteck doppelt so breit, weil der Canvas als Ganzes durch die CSS-Regeln über eine größere Fläche gestreckt wird.

Hinweis: Wenn die CSS-Regeln für width und/oder height nicht angegeben sind, verwendet der Browser die HTML-Attribute, um das Element so zu dimensionieren, dass 1 Einheit dieser Werte 1 Pixel auf der Seite entspricht. Wenn diese Attribute nicht angegeben sind, werden sie standardmäßig auf a gesetzt width von 300 und ein height von 150.

Die Leinwand wird gedehnt, wenn Sie die Breite und Höhe in Ihrem CSS festlegen. Wenn Sie die Dimension der Leinwand dynamisch manipulieren möchten, müssen Sie JavaScript wie folgt verwenden:

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');

Der Browser verwendet die CSS-Breite und -Höhe, aber das Canvas-Element wird basierend auf der Canvas-Breite und -Höhe skaliert. Lesen Sie in Javascript die CSS-Breite und -Höhe und stellen Sie die Breite und Höhe der Leinwand darauf ein.

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();

Shannimal Korrektur

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))

Canvas rendert Bilder nach Puffer. Wenn Sie also die HTML-Attribute width und height angeben, ändern sich Größe und Länge des Puffers, aber wenn Sie CSS verwenden, bleibt die Größe des Puffers unverändert. Das Bild gestreckt machen.

Verwenden der HTML-Größenanpassung.

Größe der Leinwand wird geändert -> Puffergröße wird geändert -> gerendert

Verwendung von CSS-Größenanpassung

Größe der Leinwand wird geändert -> gerendert

Da die Pufferlänge unverändert bleibt, wenn der Kontext das Bild rendert, wird das Bild in einer Leinwand mit geänderter Größe angezeigt (aber in unverändertem Puffer gerendert).