キャンバス上のCSSアスペクト比

Question

最近、Mozillaはブラウザクエストと呼ばれるHTML5ゲームを開始しました。ゲームでは、ウィンドウのサイズを変更すると、キャンバスのサイズも変更されます。

私はより多くに見て、私はそれがusign CSS3メディアクエリのbeacuseだったことがわかりました。しかし、私はまだ私はそれが右やっているとは思わないここhttps://developer.mozilla.org/en/CSS/Media_queries

を見つけました。私のキャンバスIDは#canvasです。それを私のキャンバスに入れるにはどうしたらいいですか？

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

Answer 1

メディアクエリは、あなたが求める機能をご提供することはありません。その目的は、単に特定のスタイルシートがページに適用されるときを制限することです。

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

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

Answer 2

まだ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; 
}; 

私はnew Grapher({canvasId:'#canvas'})を作成しますと、 #canvasディメンションはCSSで定義されています（通常、複雑な方法で使用可能なスペースに調整されます）。

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

Answer 3

CSSでキャンバスのサイズを定義する必要はありません。これは、「真」のサイズから拡大縮小することしかないからです。キャンバスの属性は常にwidthとheightです。

しかし、そのように親のサイズを定義することはできません。

// 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の中にキャンバスをラップし、100％（またはものは何でもしてください）にdiv要素のCSSの幅/高さを設定

親divがサイズを変更したときにイベントを発生させない場合、divでサイズが変更されたかどうかをタイマーで確認するだけで半分ごとにタイマーを確認するだけです。それがある場合は、それに応じてキャンバスのサイズを変更します。

しかし、イベントがあります。ページの設定方法によっては、このトリックを行う可能性があります。

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

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

したがって、divのサイズを変更する唯一の方法は、ウィンドウのサイズを変更することであり、onresizeはうまくいきます。それ以外の場合は、キャンバスのサイズとdivのサイズが異なるかどうかを定期的に確認するタイマーが必要です（そうであればキャンバスのサイズを変更する）。

絶えずチェックタイマーがMozillaのBepsinチームがやったことである（ベスピンがSkywriterになったし、すべてのキャンバスの使用を落とし、エースプロジェクトと合併前）