一千萬個為什麽

搜索

所有畫布標簽尺寸都以像素為單位?

所有畫布標簽尺寸都以像素為單位?

我問,因為我理解他們是。
但是我的數學很糟糕,或者我在這裏沒有抓到什麽。
我一直在做python,只是跳回到Java Scripting。
如果我只是做一些愚蠢的事情讓我知道。
對於我正在寫的遊戲,我想要一個塊狀的漸變 我有以下內容:

<�代碼> HTML </代碼>


<�代碼> CSS </代碼>

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

JavaScript(縮短)

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個像素。


Now back to the Original Java Code...
If I inspect the canvas tag in Chrome it reports 640 x 480.
If I inspect it in Fire Fox it reports 640 x 480.
BUT! Fire Fox exports the original code to png at 300 x 150 (which is 15 rows of 10). Is it some how being resized to 640 x 480 by the CSS instead of being set to a true 640 x 480?

為什麽,如何,什麽? O_o我很困惑......

最佳答案

我相信你只需要在html中創建畫布時設置畫布的寬度和高度。這些值控制畫布中坐標空間的大小,默認值為300 x 150。


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

canvas元素有兩個屬性   控制坐標的大小   空間:寬度和高度。這些   屬性,如果指定,必須具有   有效的非負值   整數。解析規則   必須使用非負整數   獲取他們的數值。如果   屬性丟失,或者解析   它的值返回一個錯誤,然後是   必須使用默認值。   width屬性默認為300,   並且height屬性默認為   150。

轉載註明原文: 所有畫布標簽尺寸都以像素為單位?