Question

我说画布上画了一个矩形。当然有某种内置方法来获取XY坐标和该矩形的尺寸？但经过一些谷歌搜索，我什么也没想到。只是为了澄清，我不是在谈论画布元素本身的坐标，而是在画布上绘制的形状/图像。

感谢任何帮助。

Answer 1

如果您正在谈论2D画布绘图，那么绘图会以1：1的方式显示屏幕坐标，因此它只是<canvas> +图形位置的位置。

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

Answer 2

Canvas是数字的二维表（数组）（= pixels = colors）。绘制到画布时，您只是在编辑此表。当您绘制到画布（=表中的更改数字）时，调整的坐标应该是什么？

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

如果您希望将图像分成一些“对象”（形状），则应使用SVG。

Answer 3

基本上，您应该使用canvas作为将图形输出到屏幕的方法，其余的逻辑直接进入为游戏/应用程序提供动力的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以获得流畅的动画效果。 Paul Irish has a good shim适用于旧版浏览器。在该功能的末尾添加requestAnimationFrame(animationStep)，您将在屏幕上缓慢移动一个红色方块。祝你好运！

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

3 个答案: