HTML5/Javascript-如何在画布上获取形状/图像的坐标？

假设我在画布上画了一个长方形。当然有某种内置的方法来获取XY坐标和矩形的尺寸？但在谷歌搜索之后，我一无所获。为了澄清，我不是在讨论画布元素本身的坐标，而是指绘制到画布上的形状/图像

---

非常感谢您的帮助。

如果您谈论的是二维画布图形，那么该图形与屏幕坐标成1:1的比例，因此它只是

+图形位置的位置

为了澄清这一点，在

上绘制基本上只是更改画布的像素-绘制到画布上后，您不能像引用html元素那样引用绘制的对象。

画布是数字（=像素=颜色）的2D表格（数组）。在画布中绘制时，您只需编辑此表。当您在画布中绘制（=更改表中的数字）时，调整的坐标应该是什么

如果只绘制矩形，并且可以定义矩形的坐标，则必须知道程序中的坐标，因为您刚刚绘制了矩形

---

如果你想把你的图像分割成一些“对象”（形状），你应该使用SVG。

基本上，你应该使用画布作为一种将图形输出到屏幕的手段，你的其余逻辑直接进入为你的游戏/应用程序提供动力的JavaScript。制作这样的东西的最佳方法是创建对象并为其指定属性；其最简单的形式如下所示：

function Player(x, y)
{
    this.x = x;
    this.y = y;
}

var examplePlayerObject = new Player(20, 20);

通过原型化扩展此对象，您可以创建具有完全相同功能的对象的多个副本；比如抽签。在这个例子中绘制播放器可能只是一个红色的正方形，它是20px*20px

Player.prototype.draw = function()
{
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = 'red';
    context.fillRect(this.x, this.y, 20, 20);
}

然后，你应该有一个更新步骤，用一些方法清除屏幕上的内容，并重新绘制已更改的部分

function animationStep()
{
    examplePlayerObject.x++;
    examplePlayerObject.y++;
    examplePlayerObject.draw();
}

---

此动画步骤应在每一帧中运行；查看requestAnimationFrame以获得平滑动画。对于较旧的浏览器。在该函数的末尾添加

requestAnimationFrame（animationStep）

，您将看到一个红方块在屏幕上缓慢移动。祝你好运

如果我有一个坐标为X:10，Y:10的画布，画布内有一个坐标为X:20，Y:20的矩形。这是否意味着矩形的坐标是X:30，Y:30？@tehepicspineapple是的，我真正想问的是，如果我想得到一个形状坐标，然后说，将它存储在一个变量中，可以吗？我会用它来做一些游戏，比如玩家/AI/etc的坐标可能不同。“绘图地图1:1与屏幕坐标…”通常不正确！仅当宽度/高度的HTML值和宽度/高度的CSS值相同时，才为True。但如果它们不同，则会发生隐式缩放。您可能需要使用canvas.offsetWidth（或height）与您指定的width=“…”（或height=“…”）的比率取消缩放。我是在游戏编程/动画的上下文中询问这一点的（我可能应该对此进行澄清）所以你并不总是知道某物的坐标在哪里，那么有什么方法可以得到坐标吗？简单地告诉我，我认为这样做的方式是不存在的，这并没有特别的帮助，当你画矩形时，你必须知道坐标，对吗？只需将其保存在变量或属性中。