html5 масштабирование холста без указания размеров

Question

Я только начал работать с элементом холста html5.

Я использую новейшие браузеры firefox и chromium. И пока они отвечают так же, как и .

То, что я пытаюсь достичь, - это масштабирование изображения без необходимости указать размеры холста или рисунка изображения. Я хотел бы, чтобы холст заполнил в окне браузера, а для изображения заполнить холст без , указав любые размеры. И чтобы перетащить холст и его изображение на летать, когда пользователь настраивает рамку браузера.

Особняк, который я тестирую, - 4284x2844.

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

Это мой первый вопрос об использовании stackoverflow, и я не завоевал форматирование . Поэтому, пожалуйста, обратите внимание на небольшое количество кода над на Pastebin:

http://pastebin.com/88faqJUx

Спасибо за вашу помощь.

Я нашел решение ...

Добавление двух линий, без каких-либо других изменений, сделал трюк, хотя в данный момент я не совсем уверен, почему он изначально был провал, но полностью счастлив двигаться на ...

<canvas id="taba_main_canvas"> 
Your browser does not support the canvas element. 
</ canvas> 

<script type="text/javascript"> 
    var main_canvas=document.getElementById("taba_main_canvas"); 
    var cxt=main_canvas.getContext("2d"); 


    // adding these next two lines solved the blurriness issues   

    //Set the canvas width to the same as the browser 
    main_canvas.width = window.innerWidth; 
    main_canvas.height = window.innerHeight; 


    var img=new Image(); 
    <!-- mansion pic 4284x2844 --> 
    img.src="images/mansion_3344.png"; 

    img.onload = function() 
    { 
     <!-- use the graphics full size and scale the canvas in css --> 
     cxt.drawImage(img,0,0,main_canvas.width,main_canvas.height); 

    } 

</script> 

просто одна крошечной проблемы, вертикальный размер изображения, видимо, лишь несколько строк выше чем холст и поэтому я получаю vertival скроллбар. Перетаскивание окна браузера выше, что обычно устраняет вертикальную полосу прокрутки, эффект не влияет. Я попытался манипулировать холстом или высотой изображения в коде, но это ничего не изменило.

Тем не менее, если изображение выглядит чистым, это большая победа. На данный момент я перехожу к этому вопросу и вернусь к этому .

Answer 1

Другой способ сделать это, чтобы прицепиться к событию документ onresize и изменить размер холста с помощью window.innerWidth и window.innerHeight или какой-либо подобного. Я сам использовал это, но это было для чего-то, что мне не нравилось в поддержке IE - см. W3C DOM Compatibility - CSS Object Model View на quirksmode для получения информации о поддержке браузера. Отметим также, что ширина полосы прокрутки составляет, включенных в innerWidth и innerHeight; если вашей странице может потребоваться прокрутка, вы можете захотеть сделать что-то вроде вычитания 20 и нанести элемент, содержащий подходящий цвет фона.

Я предполагаю, что вы не просто пытаетесь нарисовать изображение - если бы вы просто так делали, <img> было бы намного лучше.

Редактировать: jQuery имеет $(document).width(); и $(document).height();, которые, похоже, получают правильные цифры.Другое редактирование: на самом деле они ошибаются; они являются шириной и высотой документа, а не шириной и высотой окна просмотра, поэтому я думаю, что здесь есть внутренняя ширина и внутренняя высота.