使用 JS 创建与嵌入 HTML 时，HTML 画布坐标不同答案

【问题标题】：HTML canvas coordinates are different when created using JS versus embed in HTML使用 JS 创建与嵌入 HTML 时，HTML 画布坐标不同
【发布时间】：2015-05-22 13:00:10
【问题描述】：

在使用 HTML5 画布和 JS 时，我发现了一个奇怪的行为，即直接将画布添加到 HTML 正文而不是使用 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

我希望线条（笔划）在画布上是一条一致的对角线，但唉！请帮助我知道我哪里出错了！

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

【问题讨论】：

您的小提琴与您在帖子中的不同。这是偶然的吗？
抱歉，我发现有点晚了。我已经更正了。

标签： javascript html canvas html5-canvas

【解决方案1】：

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

为什么？

似乎 width 和 height 属性决定了画布坐标系的宽度或高度，而 CSS 属性只是决定了它将在其中显示的框的大小。

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

&lt;canvas id="test" width="200" height="200" style="border:1px solid #000000;"&gt;&lt;/canvas&gt;

【讨论】：

感谢您的回复。 setAttribute 按预期工作。但是，我无法理解为什么宽度不正确但高度正确。

【解决方案2】：

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

正常情况：使画布属性范围大于 CSS 范围

实际上，要制作高密度的显示画布，需要将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';

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

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

【讨论】：