キャンバス要素を拡大縮小し、縦横比を維持する

Question

私は、あるサイズのキャンバス要素を持つ単純なhtml5ページを持っています。今私はキャンバス要素が常にページから利用可能なサイズでスケールするが、特定のアスペクト比を維持することを望む。

また、javascriptコードのキャンバス要素の現在の倍率を取得する方法はありますか？

ありがとうございました！

Answer 1

もしwがあなたの幅とhの高さであれば。 w/hはあなたの比率です。

ページの幅が大きくなったり小さくなったりしました。 あなたの新しい幅の名前がnewWだとしましょう。 あなたはnewHを探しています。

比率を維持するには、数学を実行します。 newH = newW /（w/h）;

だけのdocument.getElementById（「キャンバス」）を使用し、あなたの幅と高さを取得します。幅/高さ

Answer 2

これは

canvas { 
outline: 0px; 
position: absolute; 
left: 0px; 
top: 0px; 
width: 100%; 
height: auto; 
} 

を動作するはずここで重要なことは、高さが自動的に調整されていることですキャンバス要素がどのアスペクト比であっても。