12

寸法が 979X482px のキャンバス要素があり、幅/高さのアスペクト比を 1 対 1 に保ちながら、指定されたブラウザー ウィンドウの幅に合わせて伸縮させたいのですが、高さを幅に対して相対的にスケーリングする必要があります。キャンバス。javascript/jQueryでこれを行う方法について何か提案はありますか?

4

5 に答える 5

13 
 ctx.canvas.width = window.innerWidth;

 ctx.canvas.height = 3*window.innerWidth/4;

またはそのバリエーション。ctxコンテキストです。エッジ ケースの if ステートメントが必要になる場合があります。

于 2012-05-30T04:28:17.533 に答える
6

まず、キャンバスの幅を 100% に設定します

$('#canvas').css('width', '100%');

次に、幅に基づいて高さを更新します

$(window).resize(function(){
   $('#canvas').height($('#canvas').width() / 2.031);
});

2.031 = 979/482

しかし、私のように $(window).resize にアタッチするべきではありません...それは悪い振る舞いです

于 2012-05-25T07:34:12.327 に答える
1

以前の回答はすべて素晴らしいものですが、キャンバスに描画されたすべての画像が新しいキャンバス サイズに比例して拡大縮小されるわけではありません。キネティックを使用している場合は、ここに関数を作成しました = http://www.andy-howard.com/how-to-resize-kinetic-canvas-and-maintain-the-aspect-ratio/

于 2014-05-13T06:35:15.693 に答える
-3

これを試して

$('#canvas').css('width', $(window).width());
$('#canvas').css('height', $(window).height());
于 2012-05-25T07:45:07.717 に答える