Как сделать рисунок на холсте, чтобы полностью заполнить браузер? - PullRequest
Новая
       0

Как сделать рисунок на холсте, чтобы полностью заполнить браузер?

3 голосов
/ 07 июля 2010

Вот код, который у меня есть на данный момент. 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script>
function draw()
{
    var diagCanvas = document.getElementById("diag-cnvs");

diagCanvas.height=window.innerHeight;
diagCanvas.width=window.innerWidth;

    if (diagCanvas.getContext)
    {
        var ctx = diagCanvas.getContext("2d");
        var h = w = 100;
        var color1 = 'rgba(255,0,0,1)';
        var color2 = 'rgba(255,0,0,.2)';
        var x = y = 0;

        while(y<diagCanvas.height)
        {
            while(x<diagCanvas.width)
            {
                ctx.fillStyle = color2;
                ctx.fillRect( x, y, w, h);

                ctx.fillStyle = color1;
                ctx.lineTo( x, y);
                ctx.lineTo( x+w/2, y);
                ctx.lineTo( x, y+h/2);
                ctx.lineTo( x, y);
                ctx.moveTo( x+w, y);
                ctx.lineTo( x+w, y+h/2);
                ctx.lineTo( x+w/2, y+h);
                ctx.lineTo( x, y+h);
                ctx.fill();
                ctx.closePath();

                x+=w;
            }
            y+=h;
            x=0;
        }
    }
}
$(function() {
    draw();
})
</script>
<style>
    canvas {
    position: absolute;
    top: 0;
    left: 0;
}
</style>
</head>
<body>
<canvas height="100" width="100" id="diag-cnvs"></canvas>
</body>
</html>

Я бы хотел сохранить размеры высоты и ширины одинаковыми для формы холста, но было бы здорово, чтобы это полностью заполнило браузер. 100% или в основном повторяется бесконечно, аналогично значению CSS для фонового изображения, которое повторяется по осям x и y.

В конце концов, я хотел бы добавить еще два или три цвета к полосам, но ятолько смутно понимаю, что происходит в этом коде, так как я новичок в этом.

Ответы [ 4 ]

3 голосов
/ 07 июля 2010 
function draw()
{
    var diagCanvas = document.getElementById("diag-cnvs");

    if(document.documentElement.offsetHeight<window.innerHeight)
           diagCanvas.height = window.innerHeight;
    else
           diagCanvas.width = document.documentElement.offsetHeight;
    diagCanvas.width=document.documentElement.offsetWidth;

    if (diagCanvas.getContext)
    {
        var ctx = diagCanvas.getContext("2d");
        var h = w = 100;
        var color1 = 'rgba(255,0,0,1)';
        var color2 = 'rgba(255,0,0,.2)';
        var x = y = 0;

        while(y<diagCanvas.height)
        {
            while(x<diagCanvas.width)
            {
                ctx.fillStyle = color2;
                ctx.fillRect( x, y, w, h);

                ctx.fillStyle = color1;
                ctx.lineTo( x, y);
                ctx.lineTo( x+w/2, y);
                ctx.lineTo( x, y+h/2);
                ctx.lineTo( x, y);
                ctx.moveTo( x+w, y);
                ctx.lineTo( x+w, y+h/2);
                ctx.lineTo( x+w/2, y+h);
                ctx.lineTo( x, y+h);
                ctx.fill();
                ctx.closePath();

                x+=w;
            }
            y+=h;
            x=0;
        }
    }
}
1 голос
/ 07 июля 2010

Вы добавляете этот холст в элемент body страницы? Также вы можете попробовать

position: absolute; top: 0px; left: 0px;

0 голосов
/ 07 июля 2010

Это должно быть возможно, я сделал это с помощью Canvas, хотя код дома, и я на работе, поэтому попробую сделать то, что должно быть.Стоит отметить, что если вы хотите, чтобы оно сохраняло правильное соотношение сторон изображения / холста, вам нужно использовать JavaScript (ну, я не мог понять это, кто-то меня просветил), в противном случае вы можете использовать чистый CSS: 

... header (snip) ...
</head>
<body>
    <div id="Page">
        <canvas id="MyCanvas" width="500" height="500"></canvas>
    </div>
</body>
</html>

И CSS: 

body { width: 100%; height: 100%; }
#Page { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }

#MyCanvas { height: 100%; width: 100%; }

Если это не сработает, попробуйте изменить #MyCanvas на 

#MyCanvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }

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

0 голосов
/ 07 июля 2010

используя css: 

#diag-cnvs{
    position: absolute;
    top:      0px;
    left:     0px;
    right:    0px;
    bottom:   0px;
    width:    100%;
    height:   100%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...