具有绝对位置的html5画布不起作用

Question

具有绝对位置的画布不起作用,如您所见:http: //jsfiddle.net/733zs/1/(在Firefox和Chrome中测试)矩形的大小应为500x500像素.

有没有办法让它工作,而无需手动设置宽度和高度？或者我犯了什么错误？

Answer 1

您必须手动设置宽度和高度.

这可以通过JavaScript onresize事件来完成 - 这很好,因为你几乎总是需要重新绘制画布表面onresize.

编辑:

从W3规范,这是canvas DOM界面:

http://www.w3.org/TR/html5/the-canvas-element.html

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL(in optional DOMString type, in any... args);
  void toBlob(in FileCallback, in optional DOMString type, in any... args);

  object getContext(in DOMString contextId, in any... args);
};

canvas元素有两个属性来控制坐标空间的大小:宽度和高度.指定时,这些属性必须具有有效的非负整数值.必须使用解析非负整数的规则来获取它们的数值.如果缺少某个属性,或者解析其值会返回错误,则必须使用默认值.width属性默认为300,height属性默认为150.