所有canvas标签的尺寸都是以像素为单位吗？

Question

所有canvas标签的尺寸都是以像素为单位吗？

4

我问这个问题是因为我理解它们是以像素为单位的。
但我的数学有问题，或者我只是没有掌握什么。
我主要在做Python，现在又回到了JavaScript。
如果我只是在做一些愚蠢的事情，请让我知道。
对于我正在编写的游戏，我想要一个块状渐变效果。
我有以下代码：

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（简称）

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

我认为这应该产生一系列的640像素宽，10像素高的条形图。在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像素时，在画布的非可见部分有蓝色渲染之外，它们都是32像素。

现在回到原始的Java代码... 如果我在Chrome中检查画布标签，则报告为640 x 480。如果我在Fire Fox中检查它，则报告为640 x 480。 但是！ Fire Fox将原始代码导出为300 x 150的png文件（即10行15列）。它是否被CSS调整大小为640 x 480而不是设置为真正的640 x 480呢？

为什么、如何、什么？我很困惑...

- Simon Omega

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- William · Accepted Answer

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

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

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

canvas元素有两个属性用于控制坐标空间的大小：宽度和高度。当指定这些属性时，它们的值必须是有效的非负整数。必须使用解析非负整数的规则来获取其数值。如果一个属性缺失或者解析其值返回错误，则必须使用默认值代替。宽度属性默认为300，高度属性默认为150。