発生した問題: html/11467.html">キャンバス要素が変形して歪む理由
DOM 要素には、スタイル サイズ、HTML サイズ、CSS サイズの 3 つのサイズがあります。
Canvas 要素を使用する場合、Canvas 要素のデフォルトの幅と高さは 300px * 150px です。ここでのデフォルトのサイズは html サイズです。
理解を助けるために、絵画を例に挙げてみましょう。アートボードはCSSサイズまたはスタイルサイズ、キャンバスはHTMLサイズです。
指定された Canvas 要素の HTML サイズを表示せず、CSS ファイルでその CSS サイズを指定する場合。結果は非常に混乱します。
たとえば、300px * 150px のデフォルトのキャンバスに半径 50px の円を描画します。
<html lang=zh><head> <meta charset=UTF-8> <title>キャンバスサイズ</title> <style> #canvas { width: 200px; height: 200px; </style></head>< body><div> <canvas id=canvas></canvas></div><script> window.onload = function () { const Canvas = document.getElementById(canvas); const ctx = キャンバス.getContext(2d); ctx.ストロークスタイル = #aaaaaa; ctx.ストローク();閉じるパス() };</script></body></html>表示される最終結果は次のとおりです。
キャンバスのサイズが確かに 200 * 200 であることがわかります。しかし、円が楕円になり、形が変形してしまいました。これはなぜでしょうか?
CSSで設定したサイズを削除するとどうなるでしょうか？
この時点ではグラフが正常であることがわかります。キャンバスのサイズは確かにデフォルトの 300*150 です。
比較と想像から、次の結論を導き出すことができます。
最初は300150のキャンバスに円を描きました。描画が完了したら、キャンバスのサイズを 200200 に変更したいと思います。同時に、キャンバスは同じキャンバスのままであり、変更されません。
効果的なのは、キャンバスを伸ばすことです。キャンバスに弾性があると仮定すると、キャンバスは 300150 から 200200 まで伸びます。キャンバス上の円の長半軸は元のサイズの 1.33 倍、短半軸は 0.68 倍になります。この時点では、円は当然楕円になります。
結論は：Canvas を使用して描画する場合、不要なトラブルを避けるために、Canvas 要素の HTML サイズの幅と高さを忘れずに設定する必要があります。
要約する上記は、エディターによって導入されたビジュアル要素に対する Canvas 要素の HTML サイズと CSS サイズの影響についての簡単な分析です。ご質問がある場合は、メッセージを残してください。編集者が時間内に返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！
この記事が役立つと思われる場合は、転載していただいてかまいませんので、出典を明記してください。ありがとうございます。