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

我在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行"数据:否]

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

1> Eugene Lazut..：

---

你没有发布你的代码,我怀疑你做错了什么.可以通过使用数字指定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.

---

注意:当您更改画布大小时,它似乎会清除画布(至少在chrome中).

---

@Alexis改变它的风格会改变它的缩放.所以canvas.style.width ="700px"; 会改变它的缩放比例但canvas.width = 700; 将不会.

---

是.我同意.有没有办法调整画布大小同时调整(缩放)其中的图像？

---

是的,谢谢,@JosephLennox.在jquery中,$('#canvas').width(500)将重新缩放,而$('#canvas')[0] .width = 500将不会重新缩放.我正在做前者,如果没有你的评论,我会永远解决它.

2> sam hocevar..：

---

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

但是,这将不工作:

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

---

ctx.getImageData()和ctx.putImageData()重量较轻,专为此任务而设计.

4> Jignesh Vari..：

---