如何调整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个属性的widthheight ,而且它们都是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是静态声明的,您应该使用widthheight属性,而不是风格, 例如。 这将工作:

 <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,如在这个例子中所演示的


希望这有助于。