1

CSS と Canvas の両方でゲームを開発しています。UI は CSS で開発されているため、処理が大幅に高速化されます。

1366x768 または 1920x1080 のいずれかで開発したいと考えています。

Canvas は、明らかに必要なものがすべて (単純な例) であるため、簡単にスケーリングできるようです。

HTML

<canvas width=1366 height=768>

CSS

canvas{ width:100%; height:100%; }

しかし、ページ全体を拡大または縮小するにはどうすればよいでしょうか。CSS には、キャンバスに合わせてスケーリングしたいテクスチャやその他のアセットが含まれています。

これまでに見つけた解決策は次のとおりです。

CSS

-webkit-transform: scale(resolutionRatio, resolutionRatio)

どこresolutionRatio = newResolution / 1366

width: 100%しかし、キャンバスのスケーリングと同じではなく、同じように動作するかどうかわからないので、これを完全に信頼していません。

特に何かお勧めはありますか？私は完全にコースから外れていますか？

誰かが助けてくれることを願っています。ありがとう！:)

4

1 に答える 1

1

すでにキャンバスで幅と高さを 100% 使用しているため、キャンバスとその中のすべてがページに合わせて拡大縮小されます (残念ながら、品質とパフォーマンスも低下します)。

キャンバスは % 値自体を取らないので、スケーリングする最善の方法は、実際の幅と高さをピクセル単位で計算することです (そして CSS スケーリングを削除します):

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

windowこれをのイベントで呼び出して、resizeすべてをスケールで再描画するときに、再描画関数を準備できます。もう少し手間がかかりますが、はるかに優れた結果 (およびパフォーマンス) になります。

さらにキャンバスを設定position: fixedすると、ページの更新も少し促進されます。

于 2013-07-03T14:05:26.757 に答える