3

現在、固定サイズのHTML5キャンバスがあります。次のようなものです。

<div class="container">
<canvas id="example" width="350" height="250"></canvas>
</div>

ただし、キャンバスを周囲のコンテナと同じサイズになるように拡大縮小できるようにしたいのですが、明らかに同じアスペクト比を維持する必要があります。また、ユーザーがブラウザーのサイズを変更した場合にキャンバスが流動的なコンテナーに合わせて拡大縮小されるように、流動的にする必要があります。

たとえば、コンテナが500pxの幅に設定されている場合、キャンバスの幅は同じサイズに拡大縮小されます。例えば：

<div class="container" style="width:500px;">
<canvas id="example"></canvas>
</div>

たとえば、キャンバスの幅はコンテナに合わせて500pxになり、高さは自動的に357pxに設定され、同じアスペクト比が維持されます。

私はこれがいくつかのjavascriptで達成できると信じています、私はそれを行う方法がわかりません...誰かが私を助けるのに十分な情報を提供したことを願っています。誰かがjsfiddleを作成し、可能であればそれが機能するサンプルコードを提供していただければ幸いです。

ありがとう。

4

1 に答える 1

4

アスペクト比を維持する基本的な実装は次のとおりです。http：//jsfiddle.net/wtVX2/1/

function resizeCanvas(){
    var con = document.getElementById("container"),
        canvas = document.getElementById("canvas"),
        aspect = canvas.height/canvas.width,    
        width = con.offsetWidth,
        height = con.offsetHeight;

    canvas.width = width;
    canvas.height = Math.round(width * aspect);
}

水平方向にのみ流動的であることに注意してください。

jQueryは次のようになります。

function resizeCanvas(){
    var con = $("#container"),
        canvas = $("#canvas")[0],
        aspect = canvas.height/canvas.width,
        width = con.width(),
        height = con.height();

    canvas.width = width;
    canvas.height = Math.round(width * aspect);
}

キャンバスの幅と高さも同じように設定していることに注意してください。CSSで幅/高さを設定すると、ピクセルの描画が引き伸ばされたり押しつぶされたりして、ぼやけた描画が得られます。

于 2012-10-03T20:56:18.520 に答える