從Javascript中爲畫布設置屬性失敗

根據可用的屏幕分辨率，我必須爲畫布元素設置屬性的「寬度」和「高度」。從html工程中靜態設置它們（例如<canvas id="canv" width="1600" ...）。從Javascript我不能這樣做。我搜索了谷歌搜索，但我沒有找到任何可行的方法。我使用jQuery和我已經嘗試過失敗以下（同爲height屬性）從Javascript中爲畫布設置屬性失敗

$('#canv').setAttribute('width',screen.availWidth); 
$('#canv').attr('width',screen.availWidth); 
$('#canv').data('width',screen.availWidth); 
$('#canv').width = screen.availWidth; 
$('#canv').css('width',screen.availWidth);

我也同樣把var cv = $('#canv')[0].getContext("2d");與cv，但沒有結果改變$('#canv')。

來源

2010-07-06 gc5

您是否試圖將其最大化爲**瀏覽器**可視區域或用戶的**屏幕**大小？ – 2010-07-06 20:38:14

我試圖最大化它到瀏覽器可視區域。 – gc5 2010-07-07 16:56:36

我改變了代碼jsfiddle.net/pUcjV/2至

$('#canv').attr("width", screen.availWidth);  
$('#canv').attr("height", screen.availHeight); 
circlesBG (cv, col, screen.availWidth, screen.availHeight);

from

circlesBG (cv, col, screen.availWidth, screen.availHeight); 
$('#canv').width(screen.availWidth);  
$('#canv').height(screen.availHeight);

這產生了整個畫布上的星星。這是期望的結果嗎？我使用的是Chrome 5.0.375.99。

來源

2010-07-08 11:21:03 Castrohenge

它的作品:)現在我看它是否也在原始頁面中工作，但我認爲這解決了所有問題:)非常感謝..我會嘗試評估這些答案，即使我的聲望不到15：D – gc5 2010-07-08 21:49:11

它的工作原理..奇怪的是：如果您將畫布與屬性html http://jsfiddle.net/pUcjV/7/到我們用js插入的屬性創建的最後一個畫布http://jsfiddle.net/pUcjV/8/第一個具有抗鋸齒功能，最後一個沒有： \ – gc5 2010-07-09 09:41:06

獲得了抗鋸齒工作。剛剛檢索大小更改後的上下文 - http://jsfiddle.net/pUcjV/11/。 Chrome 5.0.375.99也是如此。 – Castrohenge 2010-07-09 09:50:45

你可以像這樣做，但我不知道，如果屏幕大小是你追求的：

$('#canv').width(screen.availWidth);

You can see a demo here

來源

2010-07-06 20:39:46

這一半解決了它，謝謝;正如你可以在http://jsfiddle.net/pUcjV/2/演示中看到的那樣，現在該區域需要尺寸......但是我不能在每個像素上繪製畫布像素......它只是在標準尺寸中繪製背景並且然後最大化它.. – gc5 2010-07-07 12:56:34

此外，考慮我使用HTML 5的畫布..只是想..也許它需要在主要來源的屬性.. – gc5 2010-07-07 13:25:41

從Javascript中爲畫布設置屬性失敗

回答

相關問題