Wie kann man die Größe eines HTML-Canvas-Elements ändern?

Question

Ich habe ein Canvas-Element statisch in der HTML mit einer Breite und Höhe definiert. Wenn ich versuche, JavaScript zu verwenden, um die Größe dynamisch zu ändern (Einstellung einer neuen Breite und Höhe - entweder auf die Attribute der Leinwand oder über die Stileigenschaften), erhalte ich den folgenden Fehler in Firefox:

Ungefangene Ausnahme: [Exception... "Unzulässige Operation auf WrappedNative-Prototypobjekt" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: file:///home/russh/Desktop/test.html :: onclick :: line 1" data: no]

Ist es möglich, die Größe dieses Elements zu ändern, oder muss ich es zerstören und ein neues Element im Handumdrehen erstellen?

Answer 1

Hier ist mein Versuch, eine vollständigere Antwort zu geben (aufbauend auf @johns Antwort).

Das anfängliche Problem, auf das ich gestoßen bin, war, dass das Ändern der Breite und Höhe eines Canvas-Knotens (mithilfe von Stilen) dazu führte, dass der Inhalt einfach "gezoomt" oder "geschrumpft" wurde. Dies war nicht der gewünschte Effekt.

Nehmen wir an, Sie möchten zwei Rechtecke beliebiger Größe auf einer Leinwand zeichnen, die 100 x 100 Pixel groß ist.

<canvas width="100" height="100"></canvas>

Um sicherzustellen, dass die Rechtecke nicht die Größe der Leinwand überschreiten und somit nicht sichtbar sind, müssen Sie sicherstellen, dass die Leinwand groß genug ist.

var $canvas = $('canvas'),
    oldCanvas,
    context = $canvas[0].getContext('2d');

function drawRects(x, y, width, height)
{
  if (($canvas.width() < x+width) || $canvas.height() < y+height)
  {
    oldCanvas = $canvas[0].toDataURL("image/png")
    $canvas[0].width = x+width;
    $canvas[0].height = y+height;

    var img = new Image();
    img.src = oldCanvas;
    img.onload = function (){
      context.drawImage(img, 0, 0);
    };
  }
  context.strokeRect(x, y, width, height);
}

drawRects(5,5, 10, 10);
drawRects(15,15, 20, 20);
drawRects(35,35, 40, 40);
drawRects(75, 75, 80, 80);

Zum Schluss hier noch das jsfiddle dazu: http://jsfiddle.net/Rka6D/4/ .

Answer 2

Die Arbeit mit Prototypen kann mühsam sein, und von der _PROTO Teil des Fehlers scheint es, dass Ihr Fehler durch, sagen wir, verursacht wird, HTMLCanvasElement.prototype.width möglicherweise als Versuch, die Größe aller Leinwände auf einmal zu ändern.

Wenn Sie versuchen, die Größe mehrerer Leinwände gleichzeitig zu ändern, könnten Sie es mit einem Vorschlag versuchen:

<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<script type="text/javascript">
    ...
</script>

Versuchen Sie in JavaScript, statt einen Prototyp aufzurufen, Folgendes:

$$ = function(){
    return document.querySelectorAll.apply(document,arguments);
}
for(var i in $$('canvas')){
    canvas = $$('canvas')[i];
    canvas.width = canvas.width+100;
    canvas.height = canvas.height+100;
}

Dies würde die Größe aller Leinwände um 100 px erhöhen, wie es in dieses Beispiel

---

Ich hoffe, das war hilfreich.