HTML5Canvasの説明とサンプルチュートリアル

HTML5 Canvas

タグはグラフやその他の画像などのグラフィックを定義します。グラフィックを描画するにはスクリプトを使用する必要があります。

キャンバス上に赤い四角形、グラデーションの四角形、色付きの四角形、およびいくつかの色付きのテキストを描画します。

Canvas とは何ですか?

HTML5 要素は、スクリプト (通常は

JavaScript) を通じて行われます。スクリプトを使用してグラフィックを描画します。

Canva を使用すると、さまざまな方法でパス、ボックス、円、文字を描画したり、画像を追加したりできます。

ブラウザのサポート

Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari は 要素をサポートします。 注: Internet Explorer 8 以前のバージョンは 要素をサポートしません。キャンバスを作成します

キャンバスは、 要素によって描画される、Web ページ内の長方形のボックスです。デフォルトでは、 要素には境界線とコンテンツがありません。

簡単な例は次のとおりです:

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

注: 通常、タグでは id 属性 (スクリプトでよく参照される) を指定する必要があり、幅と高さの属性はキャンバスのサイズを定義します。

ヒント: HTML ページで使用します。 複数の 要素。

style 属性を使用して境界線を追加します。

例

<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>

JavaScript を使用して画像を描画します

Canvas 要素自体には

描画

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

Instance

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

インスタンス分析:

まず、 要素を見つけます:

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

次に、コンテキスト object

:

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

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

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

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

CSS カラー、グラデーション、またはパターンを使用できる fillStyle プロパティを設定します。 fillStyle のデフォルト設定は #000000 (黒) です。

fillRect(x,y,width,height) メソッドは、四角形の現在の塗りつぶし方法を定義します。

キャンバス座標

キャンバスは2次元グリッドです。

キャンバスの左上隅の座標は(0,0)です

上記のfillRectメソッドにはパラメータ(0,0,150,75)があります。

意味: キャンバス上に左上隅 (0,0) から開始して 150x75 の長方形を描画します。

【関連推奨事項】

1.

特別な推奨事項

:

「php Programmer Toolbox」V0.1 バージョンのダウンロード

2.

無料の h5 オンラインビデオチュートリアル3. cn オリジナル html5 ビデオチュートリアル

以上がHTML5Canvasの説明とサンプルチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。