Question

所有画布标签尺寸都以像素为单位吗？

我在问，因为我理解他们是但是我的数学被打破了，或者我在这里没有抓到什么我一直在做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×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中的canvas标签，它会报告640 x 480 如果我在Fire Fox中检查它，它会报告640 x 480 但是！ Fire Fox将原始代码导出到png为300 x 150（15行为10行）。它是如何通过CSS调整为640 x 480，而不是设置为真正的640 x 480？

为什么，如何，什么？ O_o我很困惑......

Answer 1

我相信你只需要在html中创建画布时设置画布的宽度和高度。这些值控制画布中坐标空间的大小，默认值为300 x 150。

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

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

canvas元素有两个属性控制坐标的大小空间：宽度和高度。这些属性，如果指定，必须具有有效的非负值整数。解析规则必须使用非负整数获取他们的数值。如果属性丢失，或者解析它的值返回一个错误，然后是必须使用默认值。 width属性默认为300，并且height属性默认为 150。

所有画布标签尺寸都以像素为单位？

1 个答案: