1

次の例を見てください。

  var c=document.getElementById("myCanvas");
   var ctx=c.getContext("2d");

    // First rectangle created    
    ctx.fillRect(20,20,150,100);

    // Second rectangle created    
    ctx.fillRect(20,150,150,100);

    // Third rectangle created    
    ctx.fillRect(20,300,150,100);

ここに 3 つの長方形を作成しました。3 番目の四角形を作成した後、最初の四角形を回転させたいと思います。最初の長方形の参照を取得するにはどうすればよいですか?

4

4 に答える 4

4

キャンバスは単なるピクセルのグリッドです。どんな形が描かれているのかわからない。コード (またはコードが使用するライブラリ) は、描画した図形を追跡する必要があります。

代わりに、EaselJS、Paper.js、またはKineticJSなどのシーン グラフを作成するライブラリが必要なようです。これらのライブラリは、キャンバスに描画された図形を追跡するデータ構造を維持し、それらの図形を操作する必要があるときに再描画します。

于 2012-12-20T14:02:51.800 に答える
4

長方形などのキャンバスの「参照を取得」しません。あなたが持っているのは、コンテキストを持つキャンバスだけです。あなたが描くことができる上。限目。

最初の四角形を移動する場合は、( を使用してclearRect) クリアし、新しい四角形を再描画します。

于 2012-12-20T13:59:56.633 に答える
1

のような描画関数fillRect()は何も返さない (void を返す)。

つまり、ピクセルをレンダリングするだけで、四角形オブジェクトを作成して返すことはありません。長方形の座標を自分で保存する必要があります。

于 2012-12-20T13:59:25.680 に答える