Все ли размеры тега canvas указаны в пикселях? - PullRequest
Новая
       13

Все ли размеры тега canvas указаны в пикселях?

4 голосов
/ 19 апреля 2010

Все ли размеры тега canvas указаны в пикселях?

Я спрашиваю, потому что я понял, что это так.
Но моя математика нарушена, или я просто чего-то не понимаю.
Я в основном занимался питоном и просто вернулся к Java Scripting.
Если я просто делаю что-то глупое, дай мне знать.
Для игры, которую я пишу, я хотел иметь блочный градиент.
У меня есть следующее:

HTML

<canvas id="heir"></canvas>

CSS

@media screen {
    body { font-size: 12pt }
    /* Game Rendering Space */
    canvas { 
        width: 640px; 
        height: 480px; 
        border-style: solid; 
        border-width: 1px;
    }
}

JavaScript (Shortened)

function testDraw ( thecontext )
{
    var myblue = 255;
    thecontext.save(); // Save All Settings (Before this Function was called)
    for (var i = 0; i < 480; i = i + 10 ) {
        if (myblue.toString(16).length == 1) 
        {
            thecontext.fillStyle = "#00000" + myblue.toString(16);
        } else {
            thecontext.fillStyle = "#0000" + myblue.toString(16);
        }
        thecontext.fillRect(0, i, 640, 10);
        myblue = myblue - 2;
    };
    thecontext.restore(); // Restore Settings to Save Point (Removing Styles, etc...)
}

function main ()
{
    var targetcontext = document.getElementById(“main”).getContext("2d");
    testDraw(targetcontext);
}

Для меня это должно дать серию 640w на 10h пикселей. В Google Chrome и Fire Fox я получаю 15 баров. Для меня это означает, что (480/15) - это 32 пиксельных баров.
Поэтому я изменяю код на: 

function testDraw ( thecontext )
{
    var myblue = 255;
    thecontext.save(); // Save All Settings (Before this Function was called)
    for (var i = 0; i < 16; i++ ) {
        if (myblue.toString(16).length == 1) 
        {
            thecontext.fillStyle = "#00000" + myblue.toString(16);
        } else {
            thecontext.fillStyle = "#0000" + myblue.toString(16);
        }
        thecontext.fillRect(0, (i * 10), 640, 10);
        myblue = myblue - 10;
    };
    thecontext.restore(); // Restore Settings to Save Point (Removing Styles, etc...)
}

И получите реальный результат в 32 пикселя для сравнения. Кроме того факта, что первый фрагмент кода имеет оттенки синего рендеринга в невидимых частях холста, они имеют размеры 32 пикселя.

Теперь вернемся к исходному коду Java ...
Если я проверяю тег canvas в Chrome, он сообщает 640 x 480.
Если я проверю его в Fire Fox, он выдаст 640 x 480.
НО! Fire Fox экспортирует исходный код в png с разрешением 300 x 150 (что составляет 15 строк по 10). Является ли каким-то образом изменение размера CSS до 640 x 480 вместо истинного 640 x 480?

Почему, как, что? О_о я запутался ...

1 Ответ

4 голосов
/ 19 апреля 2010

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

<canvas id="heir" width="640" height="480"></canvas>

С http://dev.w3.org/html5/spec/Overview.html#canvas

Элемент canvas имеет два атрибута контролировать размер координаты пространство: ширина и высота. Эти атрибуты, если указаны, должны иметь Значения, которые действительны неотрицательны целые числа. Правила разбора неотрицательные целые числа должны быть использованы для получить их числовые значения. Если атрибут отсутствует или при разборе его значение возвращает ошибку, затем вместо этого должно использоваться значение по умолчанию. Атрибут ширины по умолчанию равен 300, и атрибут высоты по умолчанию равен 150.

...