1

假设我在画布上画了一个矩形。肯定有某种内置方法可以获取 XY 坐标和该矩形的尺寸吗？但经过一番谷歌搜索后，我一无所获。为了澄清，我不是在谈论画布元素本身的坐标，而是在画布上绘制的形状/图像。

任何帮助表示赞赏。

4

3 回答 3

1

如果您在谈论 2D 画布绘图，则绘图与屏幕坐标 1:1 映射，因此它只是<canvas>绘图的位置 + 位置。

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

于 2013-01-19T01:06:01.577 回答
1

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

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

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

于 2013-01-19T01:09:18.857 回答
0

基本上，您应该使用画布作为将图形输出到屏幕的一种方式，其余的逻辑直接进入为您的游戏/应用程序提供动力的 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为旧版浏览器提供了很好的 shim 。requestAnimationFrame(animationStep)在该函数的末尾添加，您将看到一个红色方块在屏幕上缓慢移动。祝你好运！

于 2013-01-19T02:05:37.720 回答