55

幅と高さを持つ html で静的に定義されたキャンバス要素があります。JavaScript を使用して動的にサイズを変更しようとすると (キャンバスの属性またはスタイル プロパティを介して新しい幅と高さを設定)、Firefox で次のエラーが発生します。

キャッチされない例外: [例外...「WrappedNative プロトタイプ オブジェクトに対する不正な操作」行 1" データ: いいえ]

この要素のサイズを変更することは可能ですか、それとも破棄してその場で新しい要素を作成する必要がありますか?

4

7 に答える 7

74

あなたは自分のコードを公開していません。何か間違ったことをしていると思います。数値を使用して幅と高さの属性を割り当てることで、サイズを変更できます。

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

少なくとも私にとってはうまくいきます。文字列 (「2cm」、「3in」、「2.5px」など) を割り当てたり、スタイルをいじったりしないでください。

実際、これは公開されている知識です — HTML キャンバスの仕様ですべて読むことができます— 非常に小さく、非常に有益です。これは DOM インターフェイス全体です。

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

ご覧のとおり、 と の 2 つの属性が定義されてwidthおりheight、どちらも ですunsigned long。

于 2008-12-01T17:02:01.847 に答える
22

キャンバスが静的に宣言されている場合は、スタイルではなくwidthand属性を使用する必要があることに注意してください。これはうまくいきます：height

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

しかし、これはうまくいきません:

<canvas id="c" style="width: 100px; height: 100px; border:1px"></canvas>
<script>
    document.getElementById('c').width = 200;
</script>
于 2011-12-01T22:46:59.673 に答える
14

私はちょうどあなたと同じ問題を抱えていましたが、toDataURL メソッドについて知りました。

その要点は、現在のキャンバスを dataURL に変換し、キャンバスのサイズを変更してから、保存した dataURL からキャンバスに戻すことです。

だからここに私のコードがあります：

var oldCanvas = canvas.toDataURL("image/png");
var img = new Image();
img.src = oldCanvas;
img.onload = function (){
    canvas.height += 100;
    ctx.drawImage(img, 0, 0);
}
于 2011-04-02T15:12:12.507 に答える
5 
<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>
于 2013-02-04T08:24:42.193 に答える
4

これは今私のために働いた：

<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>
于 2008-12-01T17:04:09.610 に答える
1

これは、より完全な回答を提供するための私の努力です（@johnの回答に基づいています）。

私が最初に遭遇した問題は、(スタイルを使用して) キャンバス ノードの幅と高さを変更することでした。その結果、コンテンツが単に「ズーム」または「縮小」されました。これは望ましい効果ではありませんでした。

たとえば、100px x 100px のキャンバスに任意のサイズの 2 つの長方形を描きたいとします。

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

長方形がキャンバスのサイズを超えて表示されないようにするには、キャンバスが十分な大きさであることを確認する必要があります。

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

最後に、このための jsfiddle を次に示します: http://jsfiddle.net/Rka6D/4/。

于 2011-11-15T21:18:03.803 に答える
0

プロトタイプは扱いにくい場合があり、エラーの_PROTO一部から、エラーは、たとえば、HTMLCanvasElement.prototype.widthすべてのキャンバスのサイズを一度に変更しようとしたことが原因であると思われます。

提案として、一度に複数のキャンバスのサイズを変更しようとしている場合は、次のことを試すことができます。

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

JavaScriptでは、プロトタイプを呼び出す代わりに、次のことを試してください。

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

これにより、この例で示されているように、サイズに100ピクセルを追加して、すべてのキャンバスのサイズが変更されます。

これがお役に立てば幸いです。

于 2013-01-15T01:42:17.167 に答える