1

如何获取渲染画布元素的坐标？我需要他们申请clearRect，fillRect等等到它的区域。

我得到了画布：

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

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

然后？有办法得到左上角x，左上角y，width还有height这个？

@update 后moonshadow的回答：

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

在这里，我放置了一个表格，clearRect可以通过表格发送尺寸。当您在画布（新闻）上触发鼠标悬停时，它适用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!

使用其他值，它会部分清除。为什么会这样？

4

1 回答 1

3

画布的宽度和高度在它的 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 等，默认情况下是相对于画布的，而不是整个文档，因此您不需要将画布的顶部和左侧添加到您想要的坐标画在。

于 2009-03-23T11:28:07.863 回答