如何调整html canvas元素的大小？
我有一个宽度和高度的HTML静态定义的canvas元素。 如果我尝试使用JavaScript来dynamic调整它的大小（设置新的宽度和高度 – 无论是在canvas的属性还是通过样式属性），我在Firefox中得到以下错误：
未捕获的exception：[Exception …“WrappedNative原型对象上的非法操作”nsresult：“0x8057000c（NS_ERROR_XPC_BAD_OP_ON_WN_PROTO）”location：“JS frame :: file：///home/russh/Desktop/test.html :: onclick ::第1行“数据：否]
是否有可能调整这个元素，或者我必须摧毁它，并在飞行中创build一个新的元素？
你没有发布你的代码，我怀疑你做错了什么。 可以通过使用数字分配宽度和高度属性来更改大小：
canvasNode.width = 200; // in pixels canvasNode.height = 100; // in pixels
至less它适合我。 确保你不分配string（例如“2cm”，“3in”或“2.5px”），并且不要混淆样式。
其实这是一个公开的知识 – 你可以在HTMLcanvas规范中阅读所有关于它的知识 – 它非常小，信息量非常大。 这是整个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 。
我只是遇到了同样的问题，但是发现了toDataURL方法，事实certificate这很有用。
其要点是把你当前的canvas变成一个dataURL，改变你的canvas大小，然后从你保存的dataURL中画出你回到canvas上的内容。
所以这是我的代码：
var oldCanvas = canvas.toDataURL("image/png"); var img = new Image(); img.src = oldCanvas; img.onload = function (){ canvas.height += 100; ctx.drawImage(img, 0, 0); }
请注意，如果您的canvas是静态声明的，您应该使用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>
<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>
这刚刚为我工作：
<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>
这是我的努力给予一个更完整的答案（build立在@约翰的答案）。
我遇到的最初的问题是改变canvas节点的宽度和高度（使用样式），导致内容被“缩放”或“收缩”。 这不是预期的效果。
所以，假设你想画一个100px×100px的任意大小的两个矩形。
<canvas width="100" height="100"></canvas>
为了确保矩形不会超出canvas的大小，因此不可见，您需要确保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/ 。
原型可能是一个麻烦的工作，并从错误的_PROTO部分出现，你的错误是由HTMLCanvasElement.prototype.width造成的，可能是试图调整所有的canvas一次。
作为一个build议，如果你试图一次调整大量的canvas，你可以尝试：
<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; }
这将调整所有的canvas大小加上100px，如在这个例子中所演示的
希望这有助于。
