html5の<canvas>タグの具体的な使い方を詳しく解説-htmlチュートリアル-php.cn

html5の

黄舟

リリース： 2017-06-20 13:54:49

オリジナル

1710 人が閲覧しました

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の