具有绝对位置的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元素有两个属性来控制它的大小   坐标空间：宽度和高度。这些属性在指定时，   必须具有有效非负整数的值。规则   必须使用解析非负整数来获取它们的数字   值。如果缺少某个属性，或者解析其值会返回一个   错误，然后必须使用默认值。宽度   attribute默认为300，height属性默认为150。

Answer 2

正在裁剪矩形，因为canvas元素的大小只有300,150像素。

http://jsfiddle.net/733zs/3/

Answer 3

定位工作正常。你只是在画布的右下角画出黑框。