html5のタグの具体的な使い方を詳しく解説

要素は、クライアント側の ベクター グラフィックス シェイプ用に設計されています。独自の動作はありませんが、描画 API をクライアント JavaScript に公開して、スクリプトがキャンバス上に描画したいものを何でも描画できるようにします。

canvas は HTML5 で新しく定義されたタグで、その名前が示すように、それ自体は Canvas タグであり、それ自体の動作はありません。グラフィックを描画するにはスクリプトを使用する必要があります。以下はその使用例です:

<canvas id="canvas" width="200" height="300">  
Your browser does not support HTML5 Canvas.  
</canvas>

上記のコードからわかるように、canvas タグには id、width、height の 3 つの属性があり、このうち id 値は JavaScript コードで使用するために定義されています。 Canvas タグを参照するため、ペイント用のインターフェイスとして Canvas を使用します。 width と height はそれぞれキャンバスの幅と高さを定義します。デフォルトの単位はピクセルです。数値の後に px 単位を追加することはできません。

キャンバスタグはすべてのブラウザでサポートされているわけではないため、キャンバスの開始タグと終了タグの間にテキストを配置する必要があります。ブラウザがキャンバスタグをサポートしていない場合、このテキストは次の位置に表示されます。 Canvas タグ。このブラウザには Canvas タグが適用できないことを読者に通知します。 JavaScript では、ブラウザがこのタグをサポートするかどうかも決定する必要があります:

var canvas=document.getElementById("canvas")  
if(!canvas.getContext)  
{  
alert("Your browser does not support HTML5 Canvas.")  
}  
else  
{  
//do something here  
}

Canvas 要素を使用して赤い四角形を表示できます:

<canvas id="Canvas"></canvas>  
<script type="text/Javascript">  
var canvas=document.getElementById(&#39;Canvas&#39;);  
var ctx=canvas.getContext(&#39;2d&#39;);  
ctx.fillStyle=&#39;#FF0000&#39;;  
ctx.fillRect(0,0,80,100);  
</script>

上の例のように、描画 API は Canvas 要素自体には定義されていません。ただし、キャンバスの getContext() メソッドによって取得される描画環境オブジェクトを通じて定義されます。キャンバス API もパス表現を使用します。ただし、パスは、文字と数字の

文字列として記述されるのではなく、beginPath() メソッドや arc() メソッドの呼び出しなど、一連のメソッド呼び出しによって定義されます。パスが定義されると、fill() などの他のメソッドがこのパス上で動作します。

以上がhtml5のタグの具体的な使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。