марка высота холст авто

Question

У меня есть холст

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

Он работает отлично на хроме и светлячок. Тем не менее, то есть может работать только с шириной: 100%, но не изменять высоту (высота на 679)

Стараюсь высоту быть авто и 100%, но получить wose

Edit: наконец-то! Я понял. Это правда, что содержимое холста будет не очень хорошим на 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, вы можете получить пикселизацию и искажение.

Вместо этого измените размер размера холста.

Подумайте об этом, добавляя более пустые пиксели к ширине и высоте холста, а не «растягивая» существующие пиксели.

Вот как добавить пиксели элемента холста, чтобы сделать его 100% окна браузера:

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

Если изменение размера окна браузера, вы можете поместить этот код в окна размер обработчика сделать это происходит автоматически.

Примечание: всякий раз, когда вы изменяете размер холста таким образом, вам придется перерисовать содержимое холста.