化妆画布高度自动

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调整处理器使它会自动发生。

注意：当你调整画布这样，你将不得不重新绘制在画布内容。