4

その変数にアクセスして移動するために、変数に四角形を格納することは可能ですか? 何かのようなもの：

var rect = new Rect();
/* then in update() method */
rect.x += 5;
rect.y += 5;

このようなことは可能ですか、それともコンテキストを使用して毎回新しい長方形を作成する必要がありますか? これが唯一の可能な方法である場合、キャンバスに描かれた各長方形をどのようにターゲットにできるかわかりません。誰かが私にこれを説明してもらえますか?

4

5 に答える 5

2

HTML5 Cancasにはビットマップモデルがあります。描画するときにキャンバスのピクセルを変更し、必要に応じてピクセルを読み取ることができますが、ピクセルのロジック（線、長方形など）は失われます。

キャンバスモデルは非常に高速で、オブジェクト/ vectorielモデルでは長すぎる複雑な処理を実行できますが、rectsなどの描画されたオブジェクトを変更または削除できないという制限があります。

これを行う場合は、SVG（またはプレーンDOMオブジェクト）などのvectoriel/オブジェクトモデルを使用する必要があります。

キャンバスとオブジェクトを使用する場合の解決策は、rect変数（行ったものと同様）をプレーンなJavaScript（キャンバスの外側）に保持し、rectを変更するたびにキャンバス全体を再描画することです。これは、キャンバスを使用するアプリケーション（ゲームなど）にとって効率的で一般的です。

完全な例を次に示します。3つのrectが移動され、10ミリ秒ごとに再描画されます。

http://jsfiddle.net/dystroy/PkzDA/

私はそれを非常にシンプルですが、クリーンで効率的にしました。この種のロジックは、実際の高速アプリケーションで使用できます（私はそうです）。

于 2012-04-28T19:46:32.920 に答える
2

このチュートリアルは、このテーマを理解するのに本当に役立ちました。

http://simonsarris.com/blog/510-making-html5-canvas-useful

彼は、オブジェクトの作成、状態の追跡、マウス イベントの処理などを順を追って説明します。

于 2012-04-28T23:04:02.000 に答える
2

描画したいすべての長方形のモデルを座標とともに保存します。次に、mouseclick イベント (または必要に応じて mouseover イベント) をリッスンし、モデルの各要素を参照して、マウス クリックが四角形の座標内で行われたかどうかを確認するだけです。

以前のポスターが言ったように、キャンバスに変更を加えるたびにキャンバスを再描画する必要があります (ただし、関心のある領域のみを再描画することで処理を高速化できます)。それが少し役立つことを願っています!

編集：

長方形オブジェクトを定義できます。

function Rectangle(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;

    this.contains = function(x, y) {
        return (x > this.x && x <= (this.x + this.w) &&
            y > this.y && y <= (this.y + this.h));
    }

    this.clone = function() {
        return new Dimension(this.x, this.y, this.w, this.h);
    }
}

そして、あなたのモデルとなる配列を持っています:

var model = [];

そして、それに長方形を追加します：

model.push(new Rectangle(10,10,10,10));//x, y, width, height

次に、キャンバスをクリックすると、マウス イベントからマウス クリック座標を取得し、配列をループして、クリックが四角形の 1 つの中で行われたかどうかを確認します。

for (i = 0 ; i < model.length ; i++) {
 if (model[i].contains(mouseEvent.x, mouseEvent.y))
  //do something like redraw your canvas
}
于 2012-04-28T20:17:45.333 に答える
1

キャンバス上で四角形を移動したい場合は、x または y を変更するたびにその四角形をクリアして再描画する必要があります。

于 2012-04-28T19:58:23.057 に答える
1

まず、私が言うことと@Gaetが言ったことを組み合わせる必要があります

コンテキスト作業の削減について: 同じキャンバス コンテキストを消去せずに再利用するオプションは、四角形の描画方法を変更することです。

コンポジション スタイルを「xor」に変更する必要があるため、長方形を 2 回描画すると消え、新しい場所にペイントできるようになります。

以下の例を参照してください。

//this will switch context to xor mode
ctx.globalCompositeOperation = 'xor';

//this will paint the rectangle
ctx.fillRect(0, 0, 100, 100);

//this will remove the rectangle
ctx.fillRect(0, 0, 100, 100);
于 2012-04-29T13:50:32.043 に答える