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

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 ::第1行"数据:否]

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

Answer 1

你没有发布你的代码,我怀疑你做错了什么.可以通过使用数字指定width和height属性来更改大小:

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

正如你可以看到它定义了两个属性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>