如何調整 html canvas 元素的大小？

Question

我在 html 中靜態定義了一個具有寬度和高度的畫布元素。 如果我嘗試使用 JavaScript 動態調整其大小（設置新的寬度和高度 - 在畫布的屬性上或通過樣式屬性），我會在 Firefox 中收到以下錯誤：

未捕獲的異常：[異常...“對 WrappedNative 原型對象的非法操作”nsresult：“0x8057000c（NS_ERROR_XPC_BAD_OP_ON_WN_PROTO）”位置：“JS 框架 :: file:///home/russh/Desktop/test.html :: onclick ::第 1 行”數據：無]

是否可以調整此元素的大小，還是必須銷毀它並動態創建一個新元素？

Answer 1

你沒有發布你的代碼，我懷疑你做錯了什么。 可以通過使用數字分配寬度和高度屬性來更改大小：

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

至少它對我有用。 確保您沒有分配字符串（例如，“2cm”、“3in”或“2.5px”），並且不要弄亂樣式。

實際上，這是一個公開可用的知識——你可以在HTML canvas 規范中閱讀它的所有內容——它非常小而且信息量非常大。 這是整個 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 。

Answer 2

請注意，如果您的畫布是靜態聲明的，您應該使用width和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>

Answer 3

我剛和你遇到了同樣的問題，但我發現了 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);
}

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

這剛剛對我有用：

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

Answer 6

這是我提供更完整答案的努力（基於@john 的答案）。

我遇到的最初問題是更改畫布節點的寬度和高度（使用樣式），導致內容只是“縮放”或“縮小”。 這不是預期的效果。

因此，假設您想在 100 像素 x 100 像素的畫布中繪制兩個任意大小的矩形。

<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/ 。

Answer 7

原型可能會很麻煩，從錯誤的_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 px 添加到它們的大小來調整所有畫布的大小，如本例所示

---

希望這有幫助。