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

Sie haben Ihren Code nicht veröffentlicht, und ich vermute, dass Sie etwas falsch machen. Es ist möglich, die Größe zu ändern, indem Sie die Attribute Breite und Höhe mit Zahlen belegen:

canvasNode.width  = 200; // in pixels
canvasNode.height = 100; // in pixels

Zumindest funktioniert es bei mir. Stellen Sie sicher, dass Sie keine Zeichenketten zuweisen (z. B. "2cm", "3in" oder "2.5px"), und nicht mit Stilen herumspielen.

Dies ist ein öffentlich zugängliches Wissen - Sie können alles darüber lesen in die HTML-Canvas-Spezifikation - sie ist sehr klein und ungewöhnlich informativ. Dies ist die gesamte DOM-Schnittstelle:

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL();
  DOMString toDataURL(in DOMString type, [Variadic] in any args);

  DOMObject getContext(in DOMString contextId);
};

Wie Sie sehen können, definiert es 2 Attribute width y height und beide sind unsigned long .

Answer 2

Beachten Sie, dass Sie, wenn Ihr Canvas statisch deklariert ist, die width y height Attribute, nicht den Stil, z. B. das wird funktionieren:

<canvas id="c" height="100" width="100" style="border:1px"></canvas>
<script>
    document.getElementById('c').width = 200;
</script>

Aber das wird no Arbeit:

<canvas id="c" style="width: 100px; height: 100px; border:1px"></canvas>
<script>
    document.getElementById('c').width = 200;
</script>

Answer 3

Ich hatte gerade das gleiche Problem wie Sie, aber fand heraus, über die toDataURL-Methode, die sich als nützlich erwiesen.

Im Wesentlichen geht es darum, die aktuelle Leinwand in eine dataURL zu verwandeln, die Größe der Leinwand zu ändern und dann das, was Sie hatten, aus der gespeicherten dataURL wieder in Ihre Leinwand zu zeichnen.

Hier ist also mein Code:

var oldCanvas = canvas.toDataURL("image/png");
var img = new Image();
img.src = oldCanvas;
img.onload = function (){
    canvas.height += 100;
    ctx.drawImage(img, 0, 0);
}

Answer 4

<div id="canvasdiv" style="margin: 5px; height: 100%; width: 100%;">
    <canvas id="mycanvas" style="border: 1px solid red;"></canvas>
</div>
<script>
$(function(){
    InitContext();
});
function InitContext()
{
var $canvasDiv = $('#canvasdiv');

var canvas = document.getElementById("mycanvas");
canvas.height = $canvasDiv.innerHeight();
canvas.width = $canvasDiv.innerWidth();
}
</script>

Answer 5

Das hat bei mir gerade funktioniert:

<canvas id="c" height="100" width="100" style="border:1px solid red"></canvas>
<script>
var c = document.getElementById('c');
alert(c.height + ' ' + c.width);
c.height = 200;
c.width = 200;
alert(c.height + ' ' + c.width);
</script>