この記事では、 Canvasタグであるグラフィックグラフィックスの構築に使用されるHTML5タグについて学習します。

たとえば、幾何学的な図を描きたい場合は、画像ファイルを使用する必要があります。しかし、Canvasを使用すると、完全に自分自身を描くことができます。

1. HTML5 Canvasとは何ですか？

Canvasは他のHTMLタグと同様のHTML5タグですが、最も明らかな違いは、CanvasのコンテンツがJavascriptから構築されていることです。 Canvasを使用するには、表示する位置に<canvas></canvas>タグを配置してから、HTML5が提供するAPIを使用してCanvas内のオブジェクト（線、円、…）を操作する必要があります。

Canvasを使用するときは、Canvasの要素とそのコンテンツの違いを理解する必要があります。 Canvas要素は単なる通常のHTMLタグですが、そのコンテンツはグラフィックを構成するオブジェクトのコレクションです。

ブラウザに表示すると、Canvasはpng画像として表示されます。

 <canvas id="myCanvas" width="578" height="200"></canvas> <script> // Lấy thẻ HTML Canvas var canvas = document.getElementById('myCanvas'); // Vẽ ở mô hình 2D var context = canvas.getContext('2d'); // Thiết lập font chữ và màu context.font = '40pt Calibri'; context.fillStyle = 'blue'; // vẽ một đoạn text tại vị trí 150px 100px context.fillText('Hello World!', 150, 100); </script>

実行すると、「 Hello World！ 」というテキストが表示されます。黒く塗りつぶしてみてくださいね。画像として表示されるオブジェクトであるため、絶対にそうではありません。そのため、テキストとしてではなく、 pngファイルとしてのみ保存できます。

2.結論

これはHTML5でCanvasタグについての一連の学習を開始する最初の記事であるため、その処理方法については説明しませんが、Canvasとは何かという概念とCanvasを使用する際の注意事項のみを紹介します。次の記事では、HTML5CanvasAPIを使用してCanvasのオブジェクトを操作する方法を学習します。