0

最近、Mozilla は Browser Quest という HTML5 ゲームをリリースしました。ゲームでは、ウィンドウのサイズを変更すると、キャンバスもサイズ変更されます。

詳しく調べたところ、 https: //developer.mozilla.org/en/CSS/Media_queries にある CSS3 メディア クエリを使用していたことが原因であることがわかりました。

しかし、私はまだそれを正しく行っているとは思っていません。私のキャンバス ID は#canvasです。キャンバスに配置するにはどうすればよいですか？

私のキャンバスの特定の幅/高さ:height:352px; width:512px;

4

3 に答える 3

2

したがって、CSSでキャンバスのサイズを定義する必要はありません。これは、「実際の」サイズからスケールアウトするだけだからです。代わりに、常にCanvasの属性widthと属性を使用する必要があります。height

しかし、それはあなたがそのようにそれの親のサイズを定義することができないという意味ではありません。キャンバスをdivでラップし、divのCSSの幅/高さを100％（または任意の値）に設定します

セットアップ中のコードでは、次のことを行う必要があります。

// javascript pseudocode
canvas.width = theCanvasParent.clientWidth; // or whatever attribute it is, I'd reccomend putting all of those things in one giant container div
canvas.height = theCanvasParent.clientHeight;

ほとんどのブラウザは、親divのサイズが変更されたときにイベントを発生させないため、たとえば、タイマーで0.5秒ごとに、divのサイズが変更されたかどうかを確認する必要があります。ある場合は、それに応じてキャンバスのサイズを変更します。

ただし、onresizeイベントがあり、ページの設定方法によっては、これでうまくいく場合があります。

Firefox、Opera、Google Chrome、Safariでは、ブラウザウィンドウのサイズが変更された場合にのみonresizeイベントが発生します。

Internet Explorerでは、onresizeブラウザウィンドウまたは要素のサイズが変更されたときにイベントが発生します。

したがって、divのサイズを変更する唯一の方法がウィンドウのサイズを変更することである場合、onresizeで問題ありません。それ以外の場合は、キャンバスサイズとdivサイズが異なるかどうかを常にチェックするタイマーが必要になります（異なる場合は、キャンバスのサイズを変更します）。

常にチェックするタイマーは、Mozilla Bepsinチームが行ったことです（BespinがSkywriterになり、Aceプロジェクトとマージされ、Canvasの使用がすべて削除される前）

于 2012-05-10T16:09:53.137 に答える
1

メディアクエリは、必要な機能を提供しません。それらの目的は、特定のスタイルシートがページに適用されるタイミングを制限することです。

さらに、CSSwidthとheightプロパティは、キャンバス要素の実際のサイズを調整しません。代わりに、要素を要求されたサイズにスケーリングします。あなたの場合、キャンバスを実際には別の解像度にしたいと思います。キャンバスの解像度は、タグのDOMwidthとheight属性を介して指定されます。<canvas>

window.onresizeサイズ変更を処理するには、を使用してサイズ変更イベントをキャプチャする必要があります。次に、キャンバスコードは、目的のサイズで新しいキャンバスを作成し、元のキャンバスからすべてを適切にコピーする必要があります（キャンバスオブジェクトのサイズを変更すると、そのピクセルデータがクリアされます）。

于 2012-05-09T22:42:00.537 に答える
0

Xenethyl によってまだ指摘されているように、最も重要なポイントは onresize をフックして、新しいキャンバス オブジェクトのサイズに適応できるようにすることです。

  • キャンバスの寸法 (描画領域の寸法) をキャンバスのレンダリング領域 (clientWidth および clientHeight) に調整します。
  • 描画アルゴリズムのキャンバスの新しい寸法を考慮に入れる
  • キャンバスを再描画する

新しいキャンバスを作成する必要はありません (他のイベント ハンドラーを再フックする必要があります)。

私のWebアプリケーションのキャンバスのほとんどは、ウィンドウに完全に調整するために、スケルトンがここにある専用のクラスによって管理されています:

function Grapher(options) {
    this.graphId = options.canvasId;
    this.dimChanged = true; // you may remove that if you want (see above)
};

Grapher.prototype.draw = function() {
    if (!this._ensureInit()) return;

    // makes all the drawing, depending on the state of the application's model

    // uses dimChanged to know if the positions and dimensions of drawed objects have
    //  to be recomputed due to a change in canvas dimensions

}

Grapher.prototype._ensureInit = function() {
    if (this.canvas) return true;
    var canvas = document.getElementById(this.graphId);
    if (!canvas) {
        return false;
    }
    if (!$('#'+this.graphId).is(':visible')) return false;
    this.canvas = canvas;
    this.context = this.canvas.getContext("2d");
    var _this = this;
    var setDim = function() {
        _this.w = _this.canvas.clientWidth;
        _this.h = _this.canvas.clientHeight;
        _this.canvas.width = _this.w;
        _this.canvas.height = _this.h;
        _this.dimChanged = true;
        _this.draw(); // calls the function that draws the content
    };
    setDim();
    $(window).resize(setDim);
    // other inits (mouse hover, mouse click, etc.)
    return true;
};

あなたの場合、私は a を作成しnew Grapher({canvasId:'#canvas'})、#canvas の寸法は css で定義されます (通常、利用可能なスペースに合わせて複雑な方法で調整されます)。

最も興味深い点は setDim 関数にあります。

于 2012-05-10T06:50:49.040 に答える