为什么我在这个画布上创建的矩形没有放在正确的位置？

Question

我正在尝试创建一个单击的简单页面,并可以在画布上创建矩形.它将用户的鼠标单击作为输入,然后从单击的x和y创建一个矩形.但是,它将矩形放在一边一定量,我不知道为什么.

小提琴:https://jsfiddle.net/2717s53h/

HTML

<canvas id="cnv"></canvas>

CSS

#cnv{
    width:99vw;
    height:98vh;
    background-color:#faefbd;
}

JAVASCRIPT

$(function () {
    var canvas = $('#cnv');
    var canvObj = document.getElementById('cnv');
    var ctx = canvObj.getContext('2d');

    var point1 = {};
    var point2 = {};

    canvas.click(function (e) {
        console.log(e);

        var x = e.pageX;
        var y = e.pageY;

        console.log(x);
        console.log(y);

        if (Object.keys(point1).length == 0)
        {
            point1.x = x;
            point1.y = y;
        }
        else if (Object.keys(point2).length == 0)
        {
            point2.x = x;
            point2.y = y;

            console.log(point1);
            console.log(point2);
            var width = point2.x - point1.x;
            var height = point2.y - point1.y;
            width = width < 0 ? width * -1 : width;
            height = height < 0 ? height * -1 : height;
            ctx.fillRect(x, y, 10, 10);

            point1 = {};
            point2 = {};
        }

    });
});

Answer 1

CSS 高度/宽度与 HTML 画布属性高度和宽度之间存在差异：前者定义画布在页面中占据的空间；后者定义画布在页面中占据的空间。后者定义渲染表面。具体来说，假设您有以下画布：

<canvas height="400" width="600"></canvas>

如果视口大小为 1200x800 并且画布的 CSS 设置为width: 100%; height: 100%;，则画布将渲染为拉伸两倍大，并且高度和宽度都模糊（就像在小提琴中一样；显然这些矩形大于 10px）。因此，页面坐标与画布坐标不同步。

根据规范，您的小提琴的画布渲染表面为 300x150，因为您没有指定宽度/高度属性：

width 属性默认为 300，height 属性默认为 150。

查看您的 fiddle的稍微“更正”的版本。

因此，我的建议（作为 HTML 画布的非专家）是始终指定这 2 个属性，并且不要混淆不同的渲染表面与显示尺寸（当然不是相对的，如 vw、vh、%、em、 ...) 如果您不想要不可预测的结果；尽管一些SO用户一直在寻找解决方案。