最近、仕事の都合でHTMLのCanvasタグについて知りました。
Canvas は HTML5 の新しいコンポーネントで、JavaScript を使用してさまざまなグラフやアニメーションなどを描画できるカーテンのようなものです。
Canvas が登場する前の時代では、描画には Flash プラグインを使用する必要があり、ページのやり取りには JavaScript と Flash を使用する必要がありました。 Canvas を使用すると、Flash が不要になり、JavaScript を直接使用して描画を完了できます。
問題は、チュートリアルを見た後、自分で hello world を書いたときに始まりました。以下のコードを見てください。
<!DOCTYPE html><html lang=ja><body><canvas id=canvas1 style=width: 200px;height: 200px; border:1px ソリッドブラック;></canvas><script> var oC = document.getElementById( 'canvas1'); var ctx = oC.getContext(2d); 0); ctx.lineTo(200, 200);</script></body></html>
上記のコードの意味は、幅と高さがそれぞれ 200 ピクセルの直線をキャンバス上に描画することです。直線の始点は (0,0)、終点は (200,200) です。
ただし、ブラウザで描画される画像は次のとおりです。
この写真を見てください～なぜこんな坂になっているのでしょうか？そうじゃないよ～ 対角線のはずだよ～～
後で情報を検索したところ、canvas タグの幅と高さを設定する場合、次の方法と結果があることがわかりました。
Canvas 要素のデフォルトの幅は 300 ピクセル、高さは 150 ピクセルです。幅と高さを設定するには、次のメソッドを使用できます。
方法 1:
1 <キャンバス幅=500 高さ=500$amp;>amp;$lt;/キャンバス>
方法 2: HTML5 Canvas API 操作を使用する
1 var Canvas = document.getElementById('操作対象のキャンバスのID');
2 キャンバス幅 = 500;
3 キャンバス幅 = 500;
次のメソッドで幅と高さを設定すると、Canvas 要素は元のサイズから設定された幅と高さに引き伸ばされます。
方法 1: CSS を使用すると、
1 #キャンバスIDを操作するには{
2 幅:1000ピクセル;
3 高さ:1000ピクセル;
4｝
インライン スタイルには style= も含まれます。つまり、上記の例ではストレッチも発生します。
方法 2: HTML5 Canvas API を使用した操作が拡張されます
1 var Canvas = document.getElementById('操作対象のキャンバスのID');
2 Canvas.style.width = 1000px;
3 Canvas.style.height = 1000px;
方法 3: jquery の $(#id).width(500) を使用すると拡張されます。
その他: キャンバスの幅と高さをパーセンテージで表すことはできません。キャンバスにはパーセンテージが数値として表示されます
したがって、上記の情報から、上記の例のコードがキャンバスの幅と高さを引き伸ばし、画像が期待と矛盾することが原因であることがわかります。
ここで、キャンバスの幅と高さを正しく設定するようにコード例を書き直しました。
<!DOCTYPE HTML><html><body><canvas id=myCanvas width=200 height=200 style=border:1px Solid black;> お使いのブラウザは、canvas 要素をサポートしていません。</canvas><script type=text/ javascript> var c = document.getElementById(myCanvas); var cxt = c.getContext(0, 0); cxt.lineTo(200, 200); cxt.ストローク();</script></body></html>
結果：
仕上げる。
要約する以上がこの記事の内容です。この記事の内容が皆様の学習や仕事の参考になれば幸いです。ご質問がございましたら、VeVb Wulin へのサポートに感謝いたします。ネットワーク。