HTML canvas 使用 JS 创建与嵌入 HTML 时的坐标不同

Question

玩 HTML5 canvas 和 JS，当 canvas 直接添加到 HTML 主体而不是创建 [=25= 时，我发现了一个奇怪的行为] 使用 JS.

<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="test" width="200" height="200" style="border:1px solid #000000;">
</canvas>
<script>
    var c=document.getElementById("test");
    ctx=c.getContext("2d");
    ctx.fillStyle = "#9ea7b8";
    ctx.fill();
    ctx.moveTo(0,0);
    ctx.lineTo(200,200);
    ctx.stroke(); 

    // creating canvas using JS
    c = document.createElement("canvas");
    c.id="MyCanvas";
    c.style.width="200px";
    c.style.height="200px";
    c.style.border="1px solid #000000";
    ctx=c.getContext("2d");
    ctx.fillStyle = "#9ea7b8";
    ctx.fill();
    ctx.moveTo(0,0);
    ctx.lineTo(200,200);
    ctx.stroke();
    document.body.appendChild(c);
</script>
</body>
</html>

请查看代码和输出 here

我希望这条线（笔画）是一条穿过 canvas 的一致对角线，但唉！。请帮助我知道我哪里错了！

注意：我忘了说，我在 Chrome 上试过了，只是不确定其他浏览器的行为是否一致。

Answer 1

所以，基本上，如果您从样式更改为属性，它就会起作用。

为什么？

It seems that the width and height attributes determine the width or height of the canvas's coordinate system, whereas the CSS properties just determine the size of the box in which it will be shown.

Source

像这样它会很好地工作：

        var c = document.getElementById("test");
        ctx = c.getContext("2d");
        ctx.fillStyle = "#9ea7b8";
        ctx.fill();
        ctx.moveTo(0, 0);
        ctx.lineTo(200, 200);
        ctx.stroke();

        // creating canvas using JS
        c = document.createElement("canvas");
        c.id = "MyCanvas";
        c.setAttribute("width", "200px")
         c.setAttribute("height", "200px")
         c.style.border = "1px solid #000000";
        ctx = c.getContext("2d");
        ctx.fillStyle = "#9ea7b8";
        ctx.fill();
        ctx.moveTo(0, 0);
        ctx.lineTo(200, 200);
        ctx.stroke();
        document.body.appendChild(c);

<canvas id="test" width="200" height="200" style="border:1px solid #000000;"></canvas>

Answer 2

Canvas width 和 height 属性与其 CSS width 和 height 不同。设置 canvas.width/height 属性决定了总的可绘制像素区域，可以（但不需要）用 CSS 缩放以在屏幕上变大或变小。

正常情况：使canvas属性边界大于CSS边界

事实上，要进行高密度显示canvas，需要将canvas.width和canvas.height设置为css的两倍。换句话说，你可能会这样做：

// Two canvas pixels per screen pixel so it looks nice
// on a high density (in this case pixel ratio: 2) display
canvas.width = 800;
canvas.height = 800;
canvas.style.width = '400px';
canvas.style.height = '400px';

正常情况：使canvas属性边界小于CSS边界

另一方面，为了使某些应用程序（例如游戏）运行得更快，canvas.width 和 canvas.height 可能会限制为 640x480（或较小的东西），然后使用 [=37 进行缩放=] 占据整个屏幕。由于在 canvas 上处理的像素总数很小，因此游戏会比使用非常大的 canvas 并填满屏幕时更快。显然游戏看起来会有所不同，因为 CSS 将缩放图形（无论好坏）。

HTML canvas 使用 JS 创建与嵌入 HTML 时的坐标不同

HTML canvas coordinates are different when created using JS versus embed in HTML

html

javascript

canvas

html5-canvas