0

私はこのようなレイアウトを実現しようとしています：

望ましい効果

どこ：

  • Navbarブートストラップのようなトップメニューで、高さ60ピクセル、常に一番上にあります
  • Pop-up menuその位置に固定され（常に表示されるとは限りません）、常に上になります
  • 空き領域全体（windows wo navbar）はで埋められCanvasます。

実例： jsFiddle

に問題がありCanvasます。私は現在、シンプルなスタイルを持っています：

<canvas id="le_canvas">Y U NO CANVAS</canvas>
...
#le-canvas {
    position:absolute;
    width:100%;
    height:100%;
}

キャンバスが背景を埋めていますが、次のようになります。

  • 解像度が非常に低い
  • ウィンドウのサイズ変更中は比率が維持されません。

私が欲しいもの（可能であれば）：

  • 塗りつぶす領域のフル解像度（キャンバスと画面で1：1ピクセル）
  • 塗りつぶす面積の比率を設定します
  • ボーナス：ウィンドウのサイズ変更後に上記を更新
4

2 に答える 2

1

キャンバス要素をパーセンテージで設定しても、絶対ピクセルで設定する必要がある実際のキャンバスサイズは設定されません。ここで何が起こるかというと、デフォルトサイズのキャンバスが取得され、それがhtmlレンダリングによって引き伸ばされてぼやけた外観になります。

そのため、f.exを使用してサイズを設定する必要があります。絶対ピクセル単位のウィンドウのサイズ。

あなたはこのようにこれを行うことができます（ここでフィドルの更新：http：//jsfiddle.net/x5LpA/3/）-

ウィンドウサイズに基づいてキャンバスサイズを設定する関数を作成します（もちろん、バーの高さなどを差し引く必要がありますが、原則を示すためです）。

function initCanvasArea(cnv) {
    cnv.width = window.innerWidth;
    cnv.height = window.innerHeight;
}

キャンバスのサイズが変更されるとキャンバスのコンテンツがクリアされるため、毎回コンテンツを再度レンダリングする必要があります。そのため、レンダリングコンテンツをf.exのような別の関数に抽出するのが賢明です。

function renderCanvas(ctx) {
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect(0, 0, 55, 50);

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect(20, 20, 55, 50);
}

次に、main関数を自己呼び出し関数にし、windo.resizeのイベントハンドラーをアタッチしてキャンバスを更新します。

$(function () {

    var canvas = $('#le_canvas')[0];
    var ctx = canvas.getContext('2d');

    initCanvasArea(canvas);
    renderCanvas(ctx);

    window.onresize = function(e) {
        initCanvasArea(canvas);
        renderCanvas(ctx);
    };


})();

最後に、幅/高さを100％に設定して、CSSルールを編集します。

#le_canvas {
    position:absolute;
}

（ヒント：ここでのより良いアプローチはfixed、位置の属性を使用することです。さらに、ラッパー要素、パディング、ボックスサイズ設定を使用します。ただし、これはこの質問の範囲外です）。

于 2013-03-21T18:28:38.503 に答える
0

これはあなたが求めているものですか？を使用$(document).width()し$(document).height()て、長方形の幅と高さを取得しました。http://jsfiddle.net/x5LpA/1/

于 2013-03-21T17:58:47.980 に答える