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ますか?

moonshadowの回答後の @update :

答えはthxです。操作がキャンバスに関連していることは知っていますが、この動作について説明していないため、質問をしました。キャンバスオブジェクトを使用してテストファイルを作成しました( http://avastreg.ilbello.com /canvas/test.html )。

ここでは、フォームから寸法をclearRect送信できるフォームを配置しました。キャンバス（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!

他の値では、部分的にクリアされます。なぜこれが起こるのですか？

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 に答える