HTML画布坐标在使用JS和嵌入HTML中创建时是不同的

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

本文关键字：HTML 创建 是不同 JS 布坐标 坐标      更新时间：2023-09-26

玩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>

请参阅代码&在这里输出

我希望线条(笔画)在画布上是一致的对角线，但是唉!请帮助我知道我哪里做错了!

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

基本上，如果你从样式到属性改变它工作。

为什么?

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

来源

像这样就可以了:

        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>

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

正常场景:使canvas属性边界大于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';

正常场景:使canvas属性边界小于CSS边界

另一方面，为了使一些应用程序，如游戏快速画布。宽度和画布。高度可以限制为640x480(或更小的东西)，然后用CSS缩放以占据整个屏幕。因为在画布上处理的像素总数很小，所以游戏将比使用一个非常大的画布并填充屏幕更快。显然游戏看起来会有所不同，因为CSS会缩放图像(无论好坏)。

相关文章：