[英]How to resize html canvas element?
我在 html 中静态定义了一个具有宽度和高度的画布元素。 如果我尝试使用 JavaScript 动态调整其大小(设置新的宽度和高度 - 在画布的属性上或通过样式属性),我会在 Firefox 中收到以下错误:
未捕获的异常:[异常...“对 WrappedNative 原型对象的非法操作”nsresult:“0x8057000c(NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)”位置:“JS 框架 :: file:///home/russh/Desktop/test.html :: onclick ::第 1 行”数据:无]
是否可以调整此元素的大小,还是必须销毁它并动态创建一个新元素?
你没有发布你的代码,我怀疑你做错了什么。 可以通过使用数字分配宽度和高度属性来更改大小:
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
。
请注意,如果您的画布是静态声明的,您应该使用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>
我刚和你遇到了同样的问题,但我发现了 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);
}
<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>
这是我提供更完整答案的努力(基于@john 的答案)。
我遇到的最初问题是更改画布节点的宽度和高度(使用样式),导致内容只是“缩放”或“缩小”。 这不是预期的效果。
因此,假设您想在 100 像素 x 100 像素的画布中绘制两个任意大小的矩形。
<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/ 。
原型可能会很麻烦,从错误的_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 添加到它们的大小来调整所有画布的大小,如本例所示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.