setAttribute畫布的寬度百分比

我正在開發一個WebApp，用戶可以使用他們的移動電話和平板電腦在畫布上繪製。我的問題是，如果我在CSS中將畫布的大小指定爲百分比值，則TouchDraw-Script（http://www.codeproject.com/Articles/355230/HTML-5-Canvas-A-Simple-Paint-Program-Touch-and-Mou）不再正常工作。這是令人傷心的，因爲否則它是完美的。setAttribute畫布的寬度百分比

所以我想，我直接在腳本像這樣指定畫布的寬度和高度：

sigCanvas.setAttribute('width', '320'); 
sigCanvas.setAttribute('height', '480');

我當然要處理不同的屏幕分辨率，所以百分比值將是最好的。有沒有辦法在我的代碼中使用百分比值？原因

sigCanvas.setAttribute('width', '90%');

不起作用。在此先感謝！

來源

2013-03-05 user2135133

好了，你可以通過連接到像這樣做你想要什麼：

$(window).resize(callbackFunc);

這裏是我做得到它的工作的變化。

See on jsFiddle

$(document).ready(function() { 
    initialize(); 

    updateSize(); 
}); 

$(window).resize(updateSize); 

function updateSize() { 
    var sigCanvas = document.getElementById("canvasSignature"); 
    var xOffset = 100; 
    var yOffset = 100; // header height 
    sigCanvas.setAttribute('width', window.innerWidth - xOffset); 
    sigCanvas.setAttribute('height', window.innerHeight - yOffset); 
}

的xOffset和yOffset可以定製您的需求，我們需要從窗口的寬度和高度減去否則畫布將熄滅的頁面。另外請確保在頁面加載時運行它，以便將大小調整爲正確的大小。

來源

2013-03-05 10:00:25

這絕對好！它工作完美！非常感謝！ – user2135133 2013-03-05 10:20:35

setAttribute畫布的寬度百分比

回答

相關問題