HTML5 Canvas、初心者向けのチュートリアル

HTML5仕様は多くの新機能を紹介します。最もエキサイティングなものの1つはCanvas要素です。 HTML 5 Canvasは、JavaScriptを介してグラフィックを描く方法を提供します。これは、使いやすいが強力です。各キャンバス要素には、任意の形状を描画できるコンテキスト（コンテキスト）（図面のページと考えてください）があります。ブラウザは、複数のキャンバスコンテキストをサポートし、異なるAPIを介してグラフィカルな描画機能を提供します。ほとんどのブラウザは、オペラ、Firefox、Konqueror、Safariなど、2D Canvasコンテキストをサポートしています。さらに、オペラの一部のバージョンも3Dキャンバスをサポートしており、Firefoxはプラグインを介して3Dキャンバスもサポートできます。

この記事では、2Dキャンバスの基本と、行、形状、画像、テキストなどの基本的なキャンバス関数の使用方法について説明します。この記事を理解するには、JavaScriptの基本をよりよく理解することができます。

ここをクリックして、この記事のバッチのサンプルコードをダウンロードできます

キャンバスの基本：

キャンバスを作成する方法は簡単です。HTMLページに<Canvas>要素を追加するだけです。

<キャンバスID = mycanvas width = 300 height = 150>

ブラウザがキャンバスをサポートしていない場合に備えて、フォールバックコンテンツ。

</canvas>

JavaScriptの要素を参照するには、要素IDを設定することをお勧めします。また、キャンバスの高さと幅を設定する必要があります。

キャンバスが作成されたら、ブラシを準備しましょう。キャンバスにグラフを描くには、JavaScriptを使用する必要があります。最初にgetElementByID関​​数を介してキャンバス要素を見つけ、次にコンテキストを初期化します。その後、コンテキストAPIを使用してさまざまなグラフィックを描画できます。次のスクリプトでは、キャンバスに長方形を描きます（ここをクリックして効果を表示）：

//要素への参照を取得します。

var elem = document.getElementById（ 'mycanvas'）;

//コードが壊れないことを確認するために、常にプロパティとメソッドを確認してください

//他のブラウザで。

if（elem && elem.getContext）{

// 2Dコンテキストを取得します。

//覚えておいてください：要素ごとに1つのコンテキストのみを初期化できます。

var context = elem.getContext（ '2d'）;

if（context）{

//完了です！これで、最初の長方形を描画できます。

//（x、y）座標を提供し、その後に幅を提供する必要があります。

//高さの寸法。

Context.FillRect（0、0、150、100）;

}

}

上記のコードをドキュメントのヘッド部分、または外部ファイルに配置できます。

2DコンテキストAPI：

キャンバスの作成方法を紹介した後、2DキャンバスAPIを見て、これらの機能で何ができるかを確認しましょう。

基本行：

上記の例は、長方形を描くのがどれほど簡単かを示しています。

塗りつぶしとストロークスタイルの特性は、長方形の詰め物や線に簡単に設定できます。色の値は、CSSと同じで使用されます：16進数、RGB（）、RGBA（）、およびHSLA。 fillrectを使用して、fillrectで長方形を描くことができます。ストラークを使用して、境界と塗りつぶしのみで長方形を描きます。いくつかのキャンバスをクリアしたい場合は、ClearRectを使用できます。上記の3つの方法のパラメーターは、x、y、幅、高さの同じです。最初の2つのパラメーターは（x、y）座標を設定し、最後の2つのパラメーターは長方形の高さと幅を設定します。 LineWidthプロパティを使用して、ラインの厚さを変更できます。 fillrect、strokerect clearRectなどを使用した例を見てみましょう。

context.fillstyle = '＃00f'; // 青

context.strokestyle = '＃f00'; // 赤

Context.LineWidth = 4;

//長方形をいくつか描きます。

Context.FillRect（0、0、150、50）;

Context.Strokerect（0、60、150、50）;

Context.ClearRect（30、25、90、60）;

Context.Strokerect（30、25、90、60）;

この例レンダリングは、次の図に示されています。

パス：

任意の形状は、キャンバスパス（パス）を介して描画できます。最初にアウトラインを描画してから、境界線を描いて満たすことができます。カスタムシェイプの作成はシンプルで、beginpath（）で描画を開始し、直線、曲線、その他のグラフィックスで描画します。描画後、塗りつぶしとストロークを呼び出して塗りつぶしまたは境界を設定します。 ClosePath（）に電話して、カスタムグラフィック図面を終了します。これが三角形を描く例です。

//スタイルプロパティを設定します。

context.fillstyle = '＃00f';

context.strokestyle = '＃f00';

Context.LineWidth = 4;

context.beginpath（）;

//左上ポイントから開始します。

Context.Moveto（10、10）; //（x、y）座標を与えます

Context.lineto（100、10）;

Context.lineto（10、100）;

Context.lineto（10、10）;

// 終わり！次に、形状を埋めて、ストロークを描きます。

//注：2つの方法のいずれかを呼び出すまで、形状は表示されません。

context.fill（）;

context.stroke（）;

Context.ClosePath（）;

レンダリングを次の図に示します。

もう1つのより複雑な例では、直線、曲線、アークを使用しています。

画像を挿入：

DrawImageメソッドにより、キャンバスに他の画像（IMGおよびキャンバス要素）を挿入できます。 Operaでは、CanvasでSVGグラフィックを描画できます。この方法はより複雑で、3、5、または9のパラメーターを持つことができます

3パラメーター：ドローイメージを使用する最も基本的な方法。 1つのパラメーターは画像位置を指定し、他の2つのパラメーターはキャンバスの画像の位置を指定します。

5パラメーター：上記の3つのパラメーターを含む中間ドローイメージの使用法には、2つのパラメーターを追加して、挿入画像の幅と高さを示します（画像サイズを変更する場合）。

9パラメーター：最も複雑なドローイメージは、上記の5つのパラメーターを含む混合使用方法であり、他の4つのパラメーターはソース画像の位置と高さの幅を設定します。これらのパラメーターを使用すると、ソース画像を表示する前に動的にトリミングできます。

上記の使用方法の3つの例を次に示します。

// 3つの引数：要素、宛先（x、y）座標。

context.drawimage（img_elem、dx、dy）;

// 5つの引数：要素、目的地（x、y）座標、および宛先

//幅と高さ（ソース画像のサイズを変更する場合）。

context.drawimage（img_elem、dx、dy、dw、dh）;

// 9つの引数：要素、ソース（x、y）座標、ソース幅、および

//高さ（トリミング用）、宛先（x、y）座標、および宛先幅

// and height（sezize）。

Context.Drawimage（IMG_ELEM、SX、SY、SW、SH、DX、DY、DW、DH）;

効果は、下の図に示されています。

ピクセルレベル操作：

2DコンテキストAPIは、Pixelレベルの操作の3つの方法、CreateImagedata、GetImagedata、およびPutimagedataを提供します。 Imagedataオブジェクトは、画像のピクセル値を保存します。各オブジェクトには、幅、高さ、データの3つのプロパティがあります。データ属性タイプはCanvaspixelArrayで、幅*高さ*4ピクセル値を保存するために使用されます。各ピクセルには、RGB値と透明性アルファ値があります（その値は、アルファを含む0〜255です！）。ピクセルの順序は、左から右、上から下、列ごとに保存されます。その原則をよりよく理解するために、例を見てみましょう - 赤い長方形を描きます。

//イマゲタタオブジェクトを作成します。

var imgd = context.createimagedata（50,50）;

var pix = imgd.data;

//各ピクセルの上にループし、透明な赤を設定します。

for（var i = 0; n = pix.length、i <n; i += 4）{

pix [i] = 255; //赤いチャネル

pix [i+3] = 127; //アルファチャネル

}

//指定された（x、y）座標でimagedataオブジェクトを描画します。

Context.putimagedata（IMGD、0,0）;

注：すべてのブラウザがcreateimagedataを実装するわけではありません。サポートされているブラウザでは、Imagedataオブジェクトをgetimagedataメソッドを介して取得する必要があります。サンプルコードを参照してください。

Imagedataは、多くの機能を完了するために使用できます。たとえば、画像フィルターを実装したり、数学的な視覚化を実装したりすることができます（フラクタルやその他の特殊効果など）。次の特殊効果は、単純な色の反転フィルターを実装しています。

//指定された座標と寸法からcanvaspixelarrayを取得します。

var imgd = context.getimagedata（x、y、幅、高さ）;

var pix = imgd.data;

//各ピクセルの上にループし、色を反転させます。

for（var i = 0、n = pix.length; i <n; i += 4）{

pix [i] = 255 -pix [i]; // 赤

pix [i+1] = 255 -pix [i+1]; // 緑

pix [i+2] = 255 -pix [i+2]; // 青

// i+3はアルファ（4番目の要素）です

}

//指定された（x、y）座標でイマゲタタを描画します。

context.putimagedata（imgd、x、y）;

次の図は、このフィルターを使用した後の効果を示しています。

言葉：

最近のWebKitバージョンとFirefox 3.1 Nightly Buildは、テキストAPIをサポートし始めたばかりですが、記事の整合性を確保するために、ここでテキストAPIを紹介することにしました。

次のテキストプロパティは、コンテキストオブジェクトで設定できます。

フォント：CSSFont-Family属性と同じテキストフォント

TextAlign：テキスト水平アライメント。望ましい属性値：開始、終了、左、右、中央。デフォルト値：開始。

TextBaseLine：テキストの垂直アライメント。望ましい属性値：トップ、ハンギング、ミドル、アルファベット、アイデアグラフィック、ボトム。デフォルト値：アルファベット

テキストを描画するには、FillTextとStroketextの2つの方法があります。最初のものはフィルスタイルの塗りつぶしでテキストを描き、後者はストロークスタイルの境界のみでテキストを描画します。両方のパラメーターは同じです：描画するテキストとテキストの位置（x、y）座標。オプションのオプション - 最大幅もあります。必要に応じて、ブラウザはテキストを減らして指定された幅に適合します。テキストアライメント属性は、セット（x、y）座標へのテキストの相対的な位置に影響します。

キャンバスでHello Worldテキストを描く例は次のとおりです。

context.fillstyle = '＃00f';

context.font = 'italic 30px sans-serif';

Context.TextBaseLine = 'TOP';

context.filltext（ 'hello world！'、0、0）;

context.font = 'bold 30px sans-serif';

Context.StrokeText（ 'Hello World！'、0、50）;

次の写真はそのレンダリングです。

影の多い：

現在、KonquerorとFirefox 3.1 Nightly BuildのみがShadows APIをサポートしています。 APIのプロパティは次のとおりです。

Shadowcolor：影の色。その値は、CSS色の値と一致しています。

Shadowblur：シャドウブラーの程度を設定します。この値が大きいほど、影がぼやけます。その効果は、Photoshopのガウスファジーフィルターと同じです。

ShadowoffsetxとShadowoffsety：シャドウのxおよびyオフセット、ピクセル。

キャンバスシャドウの例は次のとおりです。

context.shadowoffsetx = 5;

context.shadowoffsety = 5;

Context.ShadowBlur = 4;

Context.ShadowColor = 'RGBA（255、0、0、0.5）';

context.fillstyle = '＃00f';

Context.FillRect（20、20、150、100）;

効果は、下の図に示されています。

カラーグラデーション：

CSSの色に加えて、フィルスタイルとストロークスタイルのプロパティは、キャンバスグラディエントオブジェクトに設定できます。 -CanvaSgradientを介して線と塗りつぶしにカラー勾配を使用できます。 Canvasgradientオブジェクトを作成するには、2つの方法を使用できます。CreateLinearGradientとCreateradialGradientです。前者は線形色の勾配を作成し、後者は円形の色勾配を作成します。カラーグラデーションオブジェクトを作成した後、オブジェクトのAddColorStopメソッドを使用して、色の中間値を追加できます。次のコードは、カラーグラデーションの使用方法を示しています。

//ソースと宛先（x、y）座標を提供する必要があります

//グラデーションの場合（開始場所と終了場所）。

var gradient1 = context.createlineargradient（sx、sy、dx、dy）;

//これで、勾配に色を追加できます。

//最初の引数は、勾配内の色の位置を伝えます。

//受け入れられた値範囲は0（勾配開始）から1（勾配端）です。

// 2番目の引数は、CSSカラー形式を使用して、必要な色を伝えます。

gradient1.addcolorstop（0、 '＃f00'）; // 赤

gradient1.addcolorstop（0.5、 '＃ff0'）; // 黄色

Gradient1.AddColorStop（1、 '＃00F'）; // 青

//放射状勾配については、ソースも提供する必要があります

//および宛先サークル半径。

//（x、y）座標円中心点を定義します（開始と

// 行き先）。

var gradient2 = context.createradialgradient（sx、sy、sr、dx、dy、dr）;

//ラジアル勾配に色を追加することは、リニアに色を追加することと同じです

//グラデーション。

また、線形色の勾配、影、テキストを使用して、より複雑な例を準備しました。

効果は、下の図に示されています。

キャンバスデモ：

キャンバスで何ができるかを知りたい場合は、次のプロジェクトを参照してください。

オペラウィジェット：

Simaquarium

アーティストのスケッチブック

スピログラフ

オンラインエンジニアリングとデモンストレーション：

ニュートン多項式

Canvascape -3Dウォーカー

Paint.Web-絵画デモ、オープンソース

スターフィールドフライト

インタラクティブブロブ

サブセクション：

Canvasは、HTML 5の最も期待される機能の1つであり、現在ほとんどのWebブラウザーでサポートされています。キャンバスは、ゲームの作成とグラフィカルユーザーインターフェイスの強化に役立ちます。 2Dコンテキスト

APIは、多くのグラフィックスの描画機能を提供しています。この記事を通してキャンバスの使用について学んだことを願っています。