HTMLキャンバスとは

html キャンバスは、グラフィックスを描画できる HTML の長方形の領域です。各ピクセルを制御できます。キャンバスは、canvas 要素を通じてページに追加できます。構文は ""。

この記事の動作環境: Windows 10 システム、html5 バージョン、Dell G3 コンピューター。

HTML キャンバスとは

キャンバスは、グラフィックを描画できる HTML 領域です。

canvas 要素は、Web ページ上にグラフィックを描画するために使用されます。

HTML5 の Canvas 要素は、JavaScript を使用して Web ページ上に画像を描画します。

キャンバスは、すべてのピクセルを制御できる長方形の領域です。

canvas には、パス、長方形、円、文字を描画したり、画像を追加したりするためのさまざまな方法があります。

Canvas 要素の作成

Canvas 要素を HTML5 ページに追加します。

要素の ID、幅、高さを指定します:

<canvas id="myCanvas" width="200" height="100"></canvas>

JavaScript による描画

canvas 要素自体には描画機能がありません。すべての描画作業は JavaScript 内で行う必要があります:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript は id を使用して Canvas 要素を検索します:

var c=document.getElementById("myCanvas");

次に、コンテキスト オブジェクトを作成します:

var cxt=c.getContext("2d");

getContext("2d " ) オブジェクトは、パス、四角形、円、文字を描画し、画像を追加するための複数のメソッドを備えた組み込みの HTML5 オブジェクトです。

次の 2 行のコードは、赤い四角形を描画します。

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle メソッドはそれを赤に染め、fillRect メソッドは形状、位置、およびサイズを指定します。

推奨チュートリアル: 「html ビデオ チュートリアル 」

以上がHTMLキャンバスとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。