Question

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

我得到画布：

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

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

然后？有一种方法可以得到左上角x，左上角y，宽度和高度？

moonshadow 的答案之后的@update：

回答，我知道操作是相对于画布的，但我问了这个问题，因为我没有解释自己这个行为：我用一个画布对象（http://avastreg.ilbello.com/canvas/test.html）做了一个测试文件。

这里我提供了一个表单，其中clearRect的维度可以通过表单发送。当您在画布上触发鼠标悬停（NEWS）时，它会将clearRect应用于该coords。在鼠标移动时，他重新填充。

起始值为：

x = 0, y = 0, w = 200, h = 200。请注意，这不起作用。

然后尝试类似

的内容

x: -10000, y: -10000, w: 50000000, h: 50000000 =＆GT;这似乎是一个笑话，但这有效！

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

Answer 1

画布的宽度和高度位于offsetWidth和offsetHeight。

我过去曾使用这样的代码来查找画布的顶部和左侧：

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等）与画布相关，而不是整个文档，因此不需要添加画布的顶部和左侧是您想要绘制的坐标。

如何检索渲染的画布元素的坐标（x，y，w，h）？

1 个答案: