html怎么求元素占据大小,javascript-如何调整html canvas元素的大小？

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

我有一个在HTML中静态定义的宽度和高度的canvas元素。 如果我尝试使用JavaScript动态调整其大小(在画布的属性上或通过样式属性设置新的宽度和高度)，则在Firefox中会出现以下错误：

未捕获的异常：[异常...“对WrappedNative原型对象的非法操作” nsresult：“ 0x8057000c(NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)”位置：“ JS框架:: [file：///home/russh/Desktop/test.html] :: onclick ::第1行”数据：否]

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

7个解决方案

64 votes

您没有发布代码，我怀疑您做错了什么。 可以通过使用数字分配width和height属性来更改大小：

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。

Eugene Lazutkin answered 2020-07-09T02:25:24Z

21 votes

请注意，如果您的画布是静态声明的，则应使用width和height属性，而不是样式。 这将工作：

document.getElementById('c').width = 200;

但这不起作用：

document.getElementById('c').width = 200;

sam hocevar answered 2020-07-09T02:25:49Z

14 votes

我只是遇到了与您相同的问题，但是发现了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);

}

john answered 2020-07-09T02:26:18Z

5 votes

$(function(){

InitContext();

});

function InitContext()

{

var $canvasDiv = $('#canvasdiv');

var canvas = document.getElementById("mycanvas");

canvas.height = $canvasDiv.innerHeight();

canvas.width = $canvasDiv.innerWidth();

}

Jignesh Variya answered 2020-07-09T02:26:33Z

4 votes

刚才对我有用：

var c = document.getElementById('c');

alert(c.height + ' ' + c.width);

c.height = 200;

c.width = 200;

alert(c.height + ' ' + c.width);

Kent Brewster answered 2020-07-09T02:26:53Z

1 votes

这是我给出更完整答案的努力(以@john的答案为基础)。

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

因此，假设您要在100px x 100px的画布中绘制两个任意大小的矩形。

为确保矩形不会超出画布的大小，因此不可见，您需要确保画布足够大。

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

Gezim answered 2020-07-09T02:27:32Z

0 votes

原型可能会很麻烦，并且从_PROTO错误的一部分来看，您的错误似乎是由HTMLCanvasElement.prototype.width引起的，可能是试图立即调整所有画布的大小。

作为建议，如果您尝试一次调整多个画布的大小，则可以尝试：

...

在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来调整其大小。希望这会有所帮助。

Braden Best answered 2020-07-09T02:28:10Z