Javascript 所有画布标记尺寸是否都以像素为单位？

所有画布标记尺寸是否都以像素为单位

我这样问是因为我理解他们的存在。
但是我的数学坏了，或者我没有掌握一些东西。
我大部分时间都在使用python，现在又开始使用Java脚本了。
如果我只是在做傻事，请告诉我。
对于我正在编写的游戏，我希望有一个块状渐变。
我有以下资料：

HTML

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

JavaScript（缩写）

函数测试绘图（上下文）
{
var myblue=255；
context.save（）；//保存所有设置（在调用此函数之前）
对于（变量i=0；i<480；i=i+10）{
if（myblue.toString（16.length==1）
{
context.fillStyle=“#00000”+myblue.toString（16）；
}否则{
context.fillStyle=“#0000”+myblue.toString（16）；
}
context.fillRect（0，i，640，10）；
myblue=myblue-2；
};
context.restore（）；//将设置还原到保存点（删除样式等…）
}
函数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...)
}

函数测试绘图（上下文）
{
var myblue=255；
context.save（）；//保存所有设置（在调用此函数之前）
对于（变量i=0；i<16；i++）{
if（myblue.toString（16.length==1）
{
context.fillStyle=“#00000”+myblue.toString（16）；
}否则{
context.fillStyle=“#0000”+myblue.toString（16）；
}
context.fillRect（0，（i*10），640，10）；
myblue=myblue-10；
};
context.restore（）；//将设置还原到保存点（删除样式等…）
}

并得到一个真正的32像素高度的结果进行比较。除了第一个代码片段在画布的不可见部分呈现蓝色阴影之外，它们的大小为32像素

---

现在回到原始Java代码…
如果我在Chrome中检查画布标记，它会报告640 x 480。
如果我在Fire Fox中检查它，它会报告640 x 480。
但是Fire Fox以300 x 150（10行15行）的速度将原始代码导出到png。CSS如何将大小调整为640 x 480，而不是设置为真正的640 x 480

---

为什么，怎么，什么？我很困惑…

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

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

从

canvas元素有两个属性 控制坐标的大小的步骤 空间：宽度和高度。这些 属性在指定时必须具有 有效的非负值 整数。解析规则 非负整数必须用于 获取它们的数值。如果 属性丢失，或者正在分析 其值返回一个错误，然后 必须改用默认值。 宽度属性默认为300， “高度”属性默认为 150

---

请注意，您还需要一个结束标记。感谢ms2ger，他没有意识到这一点。所以看起来CSS实际上是在将我的画布拉伸到640 x 480，而不是调整大小。我非常习惯于通过CSS进行所有测量和放置，我从未想过要直接设置它。我将对此进行测试，并让您知道是否是这样^_^我似乎无法编辑我的评论。但结论是：如果不设置标签的高度和宽度属性，它本身就会产生一个300 x 150的画布。CSS只是将其拉伸到640x480，从而产生失真。多谢各位+Up+bestanswer我认为所有客户端都会自动将其大小调整到您在画布标记中设置的尺寸，但是使用CSS将其加倍不会有什么坏处，如果您愿意，只需更改两个位置。

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...)
}

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