化妝畫布高度自動

Question

我有帆布

<canvas id="canvas" width="1700" height="679" style="background-color:#ffffff;width:100%;overflow:hidden;margin-top: -7px;"></canvas> 

它工作於Chrome和Firefox的罰款。然而，也就是可以用寬度只工作：100％，但不改變其高度（上679高度）

我試着高度爲汽車和100％，但得到wose

編輯：終於來了！我知道了。確實，畫布的內容在寬度100％上不會很好。 然而，對於高度（IE9以上工作），你必須設置高度風格

$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;'); 

而且使用jQuery重新大小重新大小的窗口畫布

function resizeIE() 
{ 
    canvas = document.getElementById("canvas"); 
    if($.browser.msie) //only IE 
    { 
    $("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;'); 
//set the height style first 

    if(window.innerWidth<960) //for other device (only for me) 
    { 
     var height_ie = (window.innerWidth*39.941176470588235294117647058824)/100; 
     //to make the ratio of canvas find the pencentage 
     //ex. canvas height: 1700px canvas width: 679px; 
     //(679*100)/1700 = 39.941 <-- use this one 
     //best solution 
    } 
    else 
    { 
     var height_ie = window.innerHeight-160; //just for the logo for my web 
    } 
    canvas.style.height = height_ie+"px"; 
} 
} 

適用於文件。準備好

window.onresize = function(event) { 
    resizeIE(); 
}; 

Answer 1

$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;'); 

而且使用jQuery重新大小重新大小的窗口畫布

function resizeIE() 
{ 
canvas = document.getElementById("canvas"); 
    if($.browser.msie) //only IE 
    { 
$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;'); 
//set the height style first 

if(window.innerWidth<960) //for other device (only for me) 
{ 
    var height_ie = (window.innerWidth*39.941176470588235294117647058824)/100; 
    //to make the ratio of canvas find the pencentage 
    //ex. canvas height: 1700px canvas width: 679px; 
    //(679*100)/1700 = 39.941 <-- use this one 
    //best solution 
} 
else 
{ 
    var height_ie = window.innerHeight-160; //just for the logo for my web 
} 
canvas.style.height = height_ie+"px"; 
} 
} 

應用上的document.ready

window.onresize = function(event) { 
    resizeIE(); 
}; 

Answer 2

如果使用CSS調整畫布大小，則實際上是重新調整畫布的視口。

將此視爲縮放圖像。就像調整.jpg圖像的大小一樣，您可能會產生像素化和失真。

改爲調整畫布元素的大小。的這個

想作爲添加更多的空像素的畫布的寬度和高度，而不是「拉伸」的現有像素。

以下是如何添加像素的canvas元素，使其在瀏覽器窗口的100％：

var canvas=getElementById("myCanvas"); 
canvas.width= window.innerWidth; 
canvas.height=window.innerHeight; 

如果您調整您的瀏覽器窗口，你可以把這個代碼在Windows調整處理器使它會自動發生。

注意：當你調整畫布這樣，你將不得不重新繪製在畫布內容。