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

HTML5/Javascript - How to get the coordinates of a shape/image on the canvas?

本文关键字：图像 坐标 Javascript HTML5      更新时间：2023-09-26

假设我在画布上画了一个矩形。当然有某种内置的方法来获得XY坐标，以及矩形的尺寸?但在谷歌上搜索了一下之后，我什么也没找到。澄清一下，我说的不是画布元素本身的坐标，而是绘制到画布上的形状/图像。

如果你谈论的是2D画布绘图，那么绘图与屏幕坐标1:1映射，所以它只是<canvas>的位置+绘图的位置。

澄清一下，在<canvas>上绘制基本上只是改变画布的像素-在你绘制之后，你不能像引用html元素一样引用所绘制的对象。

画布是数字(= pixels = colors)的2D表格(数组)。当绘制到画布，你只是编辑这个表。当你在画布上绘制(=改变表格中的数字)时，你的调整坐标应该是什么?

如果你只画矩形，你可以为你的矩形定义坐标，你必须知道你在程序中的坐标，因为你刚刚画了它。

如果你想让你的图像被分成一些"对象"(形状)，你应该使用SVG

基本上，你应该使用画布作为一种向屏幕输出图像的手段，剩下的逻辑直接进入为你的游戏/应用提供动力的JavaScript中。制作这类东西的最佳方法是创建对象并为其分配属性;最简单的形式如下:

function Player(x, y)
{
    this.x = x;
    this.y = y;
}
var examplePlayerObject = new Player(20, 20);

通过原型扩展这个对象，你可以创建一个具有完全相同功能的对象的多个副本;比如draw。在这个例子中，玩家可以画一个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以获得平滑动画。Paul Irish为较旧的浏览器提供了一个很好的shim。在该功能的末尾添加requestAnimationFrame(animationStep)，你将有一个红色方块在屏幕上缓慢移动。好运！

相关文章：