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

Why are the rectangles I am creating on this canvas not getting put in the right spot?

本文关键字：位置 创建 为什么      更新时间：2023-09-26

我正在尝试创建一个简单的页面，您可以单击并在画布上创建矩形。它将用户的鼠标点击作为输入，然后根据点击的x和y创建一个矩形。然而，它把矩形移到一边，我不知道为什么。

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

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

CSS的height/width和HTML的canvas属性height和width是有区别的:前者定义了canvas在页面中占用的空间;后者定义呈现表面。具体来说，假设您有以下画布:

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

与1200x800大小的视口和画布的CSS设置为width: 100%; height: 100%;，然后你的画布将被渲染为伸展两倍大和模糊的高度和宽度(就像在你的小提琴;显然这些矩形大于10px)。因此，页面坐标与画布坐标不同步。

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

宽度默认为300，高度默认为150。

查看您的小提琴稍微"修改"的版本。

因此，我的建议(作为HTML-canvas的非专家)是总是指定这两个属性，如果你不想要不可预测的结果，不要混淆不同的渲染表面和显示尺寸(当然不是像vw, vh， %， em，…);尽管一些SO用户一直在寻找解决方案

相关文章：