H5キャンバスの幅、高さ、スタイルの違いを詳しく解説

最近、キャンバスの幅と高さに関する小さな問題に遭遇しました。関連情報を検索して最終的に解決したので、以下では多くを語らずに解決プロセスを共有します。詳細を見てみましょう。

1. width height 属性を使用すると、次のように表示が正常に引き伸ばされません。

 <canvas id=mycanvas width=300 height=300>ブラウザは Canvas をサポートしていません。アップグレードするか、別のブラウザを使用してください。 </canvas><script type=text/javascript> var Canvas = document.getElementById(mycanvas), ctx = Canvas.getContext('2d'); ctx.lineTo(300,150); .ストローク();</script>

ランニング効果は以下の通り、対角線になります

2. スタイルを使用すると、画像が引き伸ばされます（変形されます）。

 <スタイル> #mycanvas {幅: 150ピクセル; 高さ: 150ピクセル;

運用効果

キャンバスは画板と画用紙です。画板は画用紙の上に描画/作業を行います。

画板と画用紙の幅と高さのデフォルトは 300*150 です。画用紙と画用紙の幅と高さが等しい場合、画像は引き伸ばされません。描画ボードが異なると、画像が引き伸ばされます（変形されます）。

1. width 属性と height 属性は、画板と画用紙の幅と高さを設定します。

例: width=300 height=300 は、画板の幅と高さが 300*300 であり、画用紙の幅と高さも 300*300 であることを意味します。ジョブの 300*300 の対角画像は表示されません。伸びてください。

2. スタイルでは画板の幅と高さのみが設定されます。画用紙の幅と高さはデフォルト値の 300*150 のままです。

(上の図を例にします) したがって、次のように、作業中の 300*300 の対角画像の一部のみが画用紙に描画されます。

ちなみに、画用紙を置いても画板は空にはならないので、画用紙と画像を画板と同じサイズに伸ばす必要があります。この例では、画用紙の幅とアートボードの幅が両方とも 30 で、高さがアートボードの半分なので、高さを 2 倍に伸ばすだけで済み、画像も引き伸ばされて薄くなります。 X 方向は変更されず、Y 方向は 2 倍になるため、変形した画像が得られます。

HTML5におけるCanvasの幅と高さの設定について

Canvas 要素はデフォルトで幅 300 ピクセル、高さ 150 ピクセルです。幅と高さを設定するには、次の方法を使用できます (拡張されません)。

方法 1:

<キャンバス幅=500高さ=500></キャンバス>

方法 2: HTML5 Canvas API を使用して操作する OK

var Canvas = document.getElementById('操作したいキャンバスのID');

Canvas.width = 500;

Canvas.width = 500;

次のメソッドで幅と高さを設定すると、Canvas 要素は元のサイズから設定された幅と高さに引き伸ばされます。

方法 1: CSS を使用すると、

#キャンバスのIDを操作するには{

幅:1000ピクセル;

高さ:1000ピクセル;

｝

方法 2: HTML5 Canvas API を使用した操作が拡張されます

var Canvas = document.getElementById('操作したいキャンバスのID');

Canvas.style.width = 1000px;

Canvas.style.height = 1000ピクセル;

方法 3: jquery の $(#id).width(500) を使用すると拡張されます。

その他: キャンバスの幅と高さをパーセンテージで表すことはできません。キャンバスにはパーセンテージが数値として表示されます

以上がこの記事の内容です。この記事の内容が皆様の学習や仕事の参考になれば幸いです。ご質問がございましたら、VeVb Wulin へのサポートに感謝いたします。ネットワーク。