javascript - 如何检索渲染的 Canvas 元素的坐标 (x,y,w,h)？

Question

如何获得渲染 Canvas 元素的坐标？我需要他们将 clearRect、fillRect 等应用到它的区域。

我得到了 Canvas :

//html
<div><canvas id="canvas_id">some useless text..</canvas></div>

//javascript   
var ctx = document.getElementById('canvas_id').getContext('2d');

然后呢？有办法得到左上角 x、左上角 y、width 和 height 吗？

在 moonshadow 的回答后@update:

thx 的答案，我知道操作是相对于 Canvas 的，但我问这个问题是因为我没有解释自己的这种行为:我已经用 Canvas 对象 ( http://avastreg.ilbello.com/canvas/test.html ) 完成了一个测试文件。

我在这里放置了一个表单，其中可以通过表单发送 clearRect 的尺寸。当您在 Canvas (NEWS) 上触发鼠标悬停时，它会将 clearRect 应用于该坐标。在 mouseout 上重新填充。

起始值为:

x = 0, y = 0, w = 200, h = 200 // Notice that doesn't work. 

然后尝试类似的东西

x: -10000, y: -10000, w: 50000000, h: 50000000 // => it seems a joke but this works!

对于其他值，它会被部分清除。为什么会这样？

Answer 1

Canvas 的宽度和高度在它的offsetWidth和offsetHeight中。

我过去使用过这样的代码来找到 Canvas 的顶部和左侧:

var canvasTop = 0;
var canvasLeft = 0;
var c = document.getElementById('canvas_id');
while( c && ( c != document.body ) )
{
  canvasTop += c.offsetTop;
  canvasLeft += c.offsetLeft;
  c = c.offsetParent;
}

一般来说，quirksmode.org有一个很大的列表，列出了这些属性的名称以及哪些浏览器支持哪些。

请记住，图形上下文操作的坐标，如 fillRect、clearRect 等，默认情况下是相对于 Canvas 的，而不是整个文档，因此您不需要添加 Canvas 的顶部和左侧到您要绘制的坐标。