4

すべてのキャンバス タグの寸法はピクセルですか?

私はそれらがそうであることを理解したので、私は尋ねています。
しかし、私の数学は壊れているか、ここで何かを把握していません.
私は主に Python をやっていて、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 x 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 コードに戻ります...
Chrome でキャンバス タグを
検査すると、640 x 480 と報告されます。Fire Fox で検査すると、640 x 480 と報告されます
。Fire Fox は元のコードを 300 x 150 (10 行 15 行) で png にエクスポートします。真の 640 x 480 に設定されるのではなく、CSS によって 640 x 480 にサイズ変更されるのはどうですか?

なぜ、どのように、何を？O_o 迷った…

4

1 に答える 1

4

htmlで作成するときは、キャンバスの幅と高さを設定するだけでよいと思います。これらの値は、キャンバスの座標空間のサイズを制御し、デフォルトは300x150です。

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

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

キャンバス要素には、座標空間のサイズを制御するための2つの属性（幅と高さ）があります。これらの属性を指定する場合は、有効な非負の整数の値を指定する必要があります。非負の整数を解析するための規則を使用して、それらの数値を取得する必要があります。属性が欠落している場合、またはその値を解析してエラーが返される場合は、代わりにデフォルト値を使用する必要があります。width属性のデフォルトは300で、height属性のデフォルトは150です。

于 2010-04-19T01:00:46.617 に答える