具有絕對位置的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。

Answer 2

正在剪切矩形，因為canvas元素只有300,150像素大。

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

Answer 3

定位工作正常。 你只是在畫布的右下角繪制黑盒子。