Question

我在html中静态定义了一个宽度和高度的canvas元素。如果我尝试使用JavaScript动态调整大小（设置新的宽度和高度 - 无论是在画布的属性上还是通过样式属性），我在Firefox中会出现以下错误：

未捕获异常：[例外...“WrappedNative原型对象上的非法操作”nsresult：“0x8057000c（NS_ERROR_XPC_BAD_OP_ON_WN_PROTO）”location：“JS frame :: file：///home/russh/Desktop/test.html :: onclick :: line 1“data：no]

是否可以调整此元素的大小，还是必须销毁它并动态创建新元素？

Answer 1

你没有发布你的代码，我怀疑你做错了什么。可以通过使用数字指定宽度和高度属性来更改大小：

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

至少它对我有用。确保你没有指定字符串（例如，“2cm”，“3in”或“2.5px”），并且不要混淆样式。

实际上这是一个公开的知识 - 你可以在the HTML canvas spec中阅读所有相关知识 - 它非常小而且非常有用。这是整个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的回答）。

我遇到的最初问题是更改画布节点的宽度和高度（使用样式），导致内容被“缩放”或“缩小”。这不是预期的效果。

所以，假设您想要在100px乘100px的画布中绘制两个任意大小的矩形。

<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来调整所有画布的大小，如this example中所示

<小时/> 希望这有所帮助。

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

7 个答案: