Ошибка максимизации холста? - PullRequest
Новая
       5

Ошибка максимизации холста?

1 голос
/ 04 мая 2010

Я, должно быть, убил больше часа из-за того, что мне кажется странным поведением, которое происходит в Firefox, Safari и Chrome.Вот некоторый код: 

<!doctype html>
<html>
    <head>
        <title>Watch me grow scrollbars!</title>
    </head>
    <body onload="resizeCanvas()">
        <canvas id="canvas"></canvas>
    </body>
</html>

<script type="application/javascript">
    function resizeCanvas() {
        var canvas = document.getElementById("canvas");
        canvas.setAttribute("height", window.innerHeight);
        canvas.setAttribute("width", window.innerWidth);
    }
</script>

По сути, холст, кажется, всегда максимизирует «слишком много», и в окне растут полосы прокрутки с обеих сторон.Я пытался использовать различные способы получения размеров документа, включая вложение холста в абсолютно позиционированный div шириной 100% и высотой, а также извлечение свойств document.documentElement.clientWidth / Height.

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

Что я здесь не так делаю?Я слишком устал, чтобы понять.Должен .. пить .. что-то.

Ответы [ 3 ]

1 голос
/ 28 мая 2011

Если вы ищете способ расширить холст, чтобы он покрыл всю страницу, лучшее решение, которое я нашел, - позволить CSS автоматически изменить его размер до 100%, а затем использовать текущий размер элемента холста для сброса разрешения холста.
Чтобы избежать использования полос прокрутки, необходимо также установить абсолютную позицию CSS холста.

(протестировано с Chrome 34, Firefox 27, Explorer 11) 

<!DOCTYPE html>
<html>
    <body onload="resizeCanvas()" style="margin: 0;">
        <canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
    </body>
</html>

<script type="application/javascript">
    function resizeCanvas() {
        var canvas = document.getElementById("canvas");
        canvas.setAttribute("width", canvas.offsetWidth);
        canvas.setAttribute("height", canvas.offsetHeight);

        // We draw a circle, just to test that it works
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(canvas.offsetWidth/2, canvas.offsetHeight/2, canvas.offsetHeight/2,    0, Math.PI*2, true); 
        ctx.closePath();
        ctx.fill();
    }
</script>
0 голосов
/ 28 мая 2011

Ну, это работает в Firefox 4, но я не пробовал в других браузерах, потому что у меня их нет на этом компьютере. 

<!doctype html>
<html>
    <head>
        <title>Watch me grow scrollbars!</title>
<style>
body { margin: 0; padding: 0; }
canvas { width: 100%; height: 100%; border: 0; }
</style>
<script type="text/javascript">
    function resizeCanvas() {
        var canvas = document.getElementById("canvas"),
            ctx = canvas.getContext('2d'),
            height = document.body.clientHeight,
            width = document.body.clientWidth;
        canvas.setAttribute("height", height);
        canvas.setAttribute("width", width);
        ctx.fillStyle = 'rgb(128,128,128)';
        ctx.fillRect(10, 10, width-20, height-20);
    }
</script>
    </head>
    <body onload="resizeCanvas()">
        <canvas id="canvas"></canvas>
    </body>
</html>

Что касается IE7 (который в любом случае не поддерживает canvas), мне пришлось изменить атрибут типа вашего скрипта с application/javascript на text/javascript, чтобы код работал.

Вот почему: (цитируя keparo на Что такое MIME-тип javascript для атрибута type тега script? )

Тип MIME для JavaScript не был стандартизированы на годы. Это снег официально: "application / javascript".

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

Итак, суть в том, что type = "text / javascript" не подходит что-нибудь, насколько Javascript обеспокоен, но это часть спецификации для HTML 4 и XHTML 1.0.

Я не знаю, означает ли это все еще более свежие версии IE.

0 голосов
/ 04 мая 2010

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

...