絕對位置的html5畫布不起作用

絕對位置的畫布不起作用，因爲您可以在此處看到： http://jsfiddle.net/733zs/1/（在Firefox和Chrome中測試）矩形的大小應爲500x500像素。絕對位置的html5畫布不起作用

有沒有辦法讓它工作，沒有手動設置寬度和高度？或者我犯過什麼錯誤？

來源

2011-12-02 user1027167

您必須手動設置寬度和高度。

這可以通過JavaScript onresize事件來完成 - 這很好，因爲幾乎總是需要重新繪製canvas表面onresize。

編輯：

從W3規格，這裏是帆布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); 
};

畫布元素具有兩個屬性來控制的大小座標空間：寬度和高度。這些屬性在指定時，必須具有有效的非負整數值。必須使用解析非負數整數的規則來獲取其數值值。如果某個屬性缺失，或者解析其值時返回錯誤，則必須使用默認值。寬度屬性默認爲300，height屬性默認爲150

來源

2011-12-02 15:23:54 Steve

所以你的意思是「帆布」你必須手動做，但'div'不是？ – user1027167

正確的畫布需要高度和寬度。無法通過正確和底部完成。 – Steve

所以我測試了這一個：http://jsfiddle.net/733zs/4/我必須手動設置寬度和高度，但canvas在offsetwidth和offsetheight中有這些值 – user1027167

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

來源

2011-12-02 15:18:12 circusdei

也做不到的頂部和底部，或左，右：http://jsfiddle.net/Ptgga/ – circusdei

爲什麼不離開並在同一時間嗎？對於div的它正在工作。 – user1027167

史蒂夫的回答看起來正確。 – circusdei

由於畫布元素只有300,150像素大，所以矩形被裁剪。

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

來源

2011-12-02 15:19:12

我知道，但它爲什麼不像頁面一樣大？我的CSS說0px到左邊0px到右邊0px到頂部和0px到底部。 – user1027167

此答案不回答OP的問題。 – Steve

絕對位置的html5畫布不起作用

回答

相關問題