Canvas は、tag_html5 チュートリアル スキルで幅と高さを直接定義する必要があります。

以前は、canvas を使って絵を描くときに、幅と高さを直接 Canvas タグに記述していましたが、なぜ幅と高さを直接記述する必要があるのか​​を調べたことがありませんでした。これはさまざまな例に当てはまるためです。今日、Sir Wang は質問を提起しました。幅と高さが

最初にコードを見てください:

コードをコピーします

コードは次のとおりです:

> ;


> ;
< ;/head>

< ;/canvas>
<script><br /> functiondraw() {<br /> var Canvas=document.getElementById('canvas');<br /> var context=canvas.getContext(' 2d');<br /> context.beginPath();<br /> context.moveTo(20,20);<br /> context.lineTo(200,100);<br /> context.lineWidth=5;<br /> context.ストローク();<br /> }<br /></script>

1. 幅: 400; 高さ: 300; に直接書き込みます:

2. の幅と高さを削除します。幅: 400; 高さ: 300;

両者の効果が異なるのはなぜですか?

Canvas は、他のタグと同様に、CSS を通じてスタイルを設定することもできます。ただし、ここで注意する必要があるのは、キャンバスのデフォルトの幅と高さが 300px * 150px であることです。CSS でキャンバスの幅と高さを定義すると、キャンバスが使用される場合、実際には幅と高さが 300px * 150px に拡張されます。この状況で描画すると、得られるグラフィックスは変形の影響を受ける可能性があります。したがって、canvas 上に描画する場合は、幅と高さを Canvas タグで直接定義する必要があります。