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

Question

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

Я использую новейшие браузеры Firefox и Chromium. И до сих пор они отвечая одинаково.

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

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

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

Это мой первый вопрос о переполнении стека, и я не покорил форматирование. Итак, обратите внимание на небольшое количество кода на пастбине:

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>

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

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

Answer 1

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

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

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