5仕様は多くの新機能を紹介します。最もエキサイティングなものの1つはcanvas要素です。 HTML5 canvas 、JavaScriptを介してグラフを描画する方法を提供します。これは、使いやすいが強力です。各canvas要素には、任意の形状を描画できるコンテキスト（コンテキスト）（図面のページと考えてください）があります。ブラウザは、複数のキャンバスコンテキストをサポートし、さまざまなコンテキストを介してグラフィカルな描画関数を提供します。グラフィック描画機能を提供します。 5仕様は多くの新機能を紹介します。最もエキサイティングなものの1つは要素です。 HTML5は、JavaScriptを介してグラフィックを描画する方法を提供します。これは、使いやすいが強力なものです。各要素には、任意の形状を描画できるコンテキスト（コンテキスト）（図面のページと考えてください）があります。ブラウザは、複数のキャンバスコンテキストをサポートし、さまざまなコンテキストを介してグラフィカルな描画関数を提供します。
ほとんどのブラウザは、オペラ、Firefox、Konqueror、Safariなど、2D Canvasコンテキストをサポートしています。さらに、オペラの一部のバージョンも3Dキャンバスをサポートしており、Firefoxはプラグインを介して3Dキャンバスをサポートできます。
コンテキスト記事
この記事では、2Dキャンバスを紹介します
基本と、線、形、画像、テキストなどの基本的なキャンバス関数を使用する方法。この記事を理解するには、JavaScriptの基本をよりよく理解することができます。
ここをクリックして、この記事のバッチのサンプルコードをダウンロードできます
キャンバスを作成する方法は非常にシンプルです。 <canvas>要素をHTMLページに追加するだけです。
<canvas id=mycanvas width=300 height=150>fallback content, in case the browser does not support canvas.</canvas>JavaScriptの要素を参照できるようにするには、要素のIDを設定することをお勧めします。また、キャンバスの高さと幅を設定する必要があります。
キャンバスが作成されたら、ブラシを準備しましょう。キャンバスにグラフを描くには、JavaScriptを使用する必要があります。最初にgetelementbyid関数を介してキャンバスを見つけます
要素、次にコンテキストを初期化します。コンテキストAPIを使用して、さまざまなグラフィックを後で描画できます。次のスクリプトでは、キャンバスに長方形を描きます（ここをクリックして効果を表示）：
// get a reference to the element.var elem = document.getelementbyid('mycanvas');// always check for properties 和methods, to make sure your code doesn't break // in other browsers.if (elem && elem.getcontext) { // get the 2d context. // remember: you can only initialize one context per element. var context = elem.getcontext('2d'); if (context) { // you are done! now you can draw your first rectangle. // you only need to provide the (x,y) coordinates, followed by the width and // height dimensions. context.fillrect(0, 0, 150, 100); }}上記のコードをドキュメントのhead部分、または外部ファイルに配置できます。
キャンバスの作成方法を紹介した後、2DキャンバスAPIを見て、これらの機能で何ができるかを見てみましょう。
上記の例は、長方形を描くのがどれほど簡単かを示しています。
塗りつぶしとストロークスタイルの特性は、長方形の詰め物や線に簡単に設定できます。色の値の使用法と16進数、（）、（）、および（）（オペラなどのブラウザがサポートしている場合
10およびFirefox 3）。 （）（Opera10やFirefox 3など、ブラウザがサポートしている場合）。 （）および（）（Opera10やFirefox 3など、ブラウザがサポートしている場合）。 （）、（）、および（）（Opera10やFirefox 3など、ブラウザがサポートしている場合）。 16進数、（）、（）、および（）（Opera10やFirefox 3などのブラウザによってサポートされている場合）。
fillrect使用して、塗りつぶしの長方形を描画できます。 strokerectを使用して、境界と塗りつぶしのみで長方形を描きます。いくつかのキャンバスをクリアしたい場合は、 clearrectを使用できます。上記の3つの方法のパラメーターは、 x 、 y 、幅、高さの同じです。最初の2つのパラメーターは（x、y）座標を設定し、最後の2つのパラメーターは長方形の高さと幅を設定します。
LineWidth属性を使用して、ラインの厚さを変更できます。 fillrectが使用されているかどうかを見てみましょう、
strokerect clearrectおよびその他の例：
context.fillstyle = '#00f'; // bluecontext.strokestyle = '#f00'; // redcontext.linewidth = 4;// draw some rectangles.context.fillrect (0, 0, 150, 50);context.strokerect(0, 60, 150, 50);context.clearrect (30, 25, 90, 60);context.strokerect(30, 25, 90, 60);この例レンダリングを図1に示します。
図1：FillRect、Strokerectおよび
clearrect効果図
任意の形状は、キャンバスパス（パス）を介して描画できます。最初にアウトラインを描画してから、境界線を描いて満たすことができます。カスタムシェイプの作成はシンプルで、 beginpath()で描画を開始し、直線、曲線、その他のグラフィックスで描画します。描画後、 fillとstrokeを呼び出して塗りつぶしまたは境界を設定します。 closepath()に電話して、カスタムグラフィック図面を終了します。
これが三角形を描く例です。
// set the style properties.context.fillstyle = '#00f';context.strokestyle = '#f00';context.linewidth = 4;context.beginpath();// start from the top-left point.context.moveto(10, 10); // give the (x,y) coordinatescontext.lineto(100, 10);context.lineto(10, 100);context.lineto(10, 10);// done! now fill the shape, 和draw the stroke.// note: your shape will not be visible until you call any of the two methods.context.fill();context.stroke();context.closepath();レンダリングを図2に示します。
図2：三角形
もう1つの責任ある例では、直線、曲線、アークを使用しています。
drawimageメソッドにより、キャンバスに他の画像を挿入できます
（ imgおよびcanvas要素）。オペレーターでは、キャンバスでSVGグラフィックを描画できます。この方法は非常に複雑で、3、5、または9のパラメーターを持つことができます。
drawimageを使用する最も基本的な方法。 1つのパラメーターは画像位置を指定し、他の2つのパラメーターはキャンバスの画像の位置を指定します。drawimage使用法には、2つのパラメーターを追加して、挿入画像の幅と高さを示します（画像サイズを変更する場合）。drawimage使用方法、および他の4つのパラメーターは、ソース画像の位置と高さの幅を設定します。これらのパラメーターを使用すると、ソース画像を表示する前に動的にトリミングできます。上記の使用方法の3つの例を次に示します。
// three arguments: the element, destination (x,y) coordinates.context.drawimage( img_elem , dx , dy );// five arguments: the element, destination (x,y) coordinates, and destination // width and height (if you want to resize the source image).context.drawimage( img_elem , dx , dy , dw , dh );// nine arguments: the element, source (x,y) coordinates, source width and // height (for cropping), destination (x,y) coordinates, and destination width // and height (resize).context.drawimage( img_elem , sx , sy , sw , sh , dx , dy , dw , dh );効果を図3に示します。
図3： drawimageレンダリング。
2DコンテキストAPIは、ピクセルレベルの操作に3つの方法を提供します： createimagedata 、 getimagedata 、および
putimagedata 。
imagedataオブジェクトは、画像のピクセル値を保存します。各オブジェクトには、幅、高さ、およびの3つのプロパティがあります
データ。データ属性タイプはCanvaspixelArrayで、 width * height *4ピクセル値を保存するために使用されます。各ピクセルにはRGB値と透明性アルファ値があります（その値は0から0です
255、アルファを含む！）。ピクセルの順序は、左から右、上から下、列ごとに保存されます。
その原則をよりよく理解するために、例を見てみましょう - 赤い長方形を描く
// create an imagedata object.var imgd = context.createimagedata(50,50);var pix = imgd.data;// loop over each pixel 和set a transparent red.for (var i = 0; n = pix.length, i < n; i += 4) { pix[i ] = 255; // red channel pix[i+3] = 127; // alpha channel}// draw the imagedata object at the given (x,y) coordinates.context.putimagedata(imgd, 0,0);注：すべてのブラウザがcreateimagedata実装するわけではありません。サポートされているブラウザでは、 imagedataオブジェクトをgetimagedataメソッドを介して取得する必要があります。サンプルコードを参照してください。
多くの機能は、 imagedataを通じて達成できます。たとえば、画像フィルターを実装したり、数学的な視覚化を実装したりすることができます（フラクタルやその他の特殊効果など）。次の特殊効果は、単純な色の反転フィルターを実装しています。
// get the canvaspixelarray from the given coordinates and dimensions.var imgd = context.getimagedata( x , y , width , height );var pix = imgd.data;// loop over each pixel and invert the color.for (var i = 0, n = pix.length; i < n; i += 4) { pix[i ] = 255 - pix[i ]; // red pix[i+1] = 255 - pix[i+1]; // green pix[i+2] = 255 - pix[i+2]; // blue // i+3 is alpha (the fourth element)}// draw the imagedata at the given (x,y) coordinates.context.putimagedata(imgd, x , y );図4は、このフィルターを使用した後のオペラを示しています
画像（図3は元の画像です）。
図4：色の反転フィルター
最近のWebKitバージョンとFirefox 3.1 Nightly BuildはテキストAPIをサポートし始めていますが、記事の整合性を確保するために、ここでテキストAPIを導入することにしました。
次のテキストプロパティは、 contextオブジェクトで設定できます。
font ：テキストフォント、同じfont-family属性属性
textalign ：テキスト水平アライメント。望ましい属性値： start 、 end 、 left 、 right 、 center 。デフォルト値：
start 。
textbaseline ：テキストの垂直アライメント。望ましい属性値： top 、 hanging 、 middle 、 alphabetic 、 ideographic 、 bottom 。デフォルト値： alphabetic 。
テキストを描画するには、 filltextとstroketext 2つの方法があります。最初のものは塗りつぶしのテキストを描き、後者はストロークスタイルの境界のみでテキストを描画します。両方のパラメーターは同じです：描画するテキストとテキストの位置（x、y）座標。オプションのオプション - 最大幅もあります。必要に応じて、ブラウザはテキストを減らして指定された幅に適合します。
テキストアライメント属性は、テキストと設定に影響します
（x、y）座標の相対位置。
これがキャンバスでHelloWorldテキストを描く例です
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);図5はそのレンダリングです。
図5：テキスト効果
現在、KonquerorとFirefox 3.1のみのBuild Support 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);効果を図6に示します。
図6：キャンバスシャドウエフェクト - 青い長方形、赤い影
CSSの色に加えて、 fillstyleとstrokestyleプロパティは、 canvasgradientオブジェクトに設定できます。 canvasgradient 、ラインとフィルにカラーグラデーションを使用できます。
canvasgradientオブジェクトを作成するには、2つの方法を使用できます。CreateLinearGradientとcreatelineargradient createradialgradient 。前者は線形色の勾配を作成し、後者は円形の色勾配を作成します。
カラーグラデーションオブジェクトを作成した後、オブジェクトのaddcolorstopメソッドを使用して、色の中間値を追加できます。
次のコードは、カラーグラデーションの使用方法を示しています。
// you need to provide the source 和destination (x,y) coordinates // for the gradient (from where it starts 和where it ends).var gradient1 = context.createlineargradient( sx , sy , dx , dy );// now you can add colors in your gradient.// the first argument tells the position for the color in your gradient. the // accepted value range is from 0 (gradient start) to 1 (gradient end).// the second argument tells the color you want, using the css color format.gradient1.addcolorstop(0, '#f00'); // redgradient1.addcolorstop(0.5, '#ff0'); // yellowgradient1.addcolorstop(1, '#00f'); // blue// for the radial gradient you also need to provide source// 和destination circle radius.// the (x,y) coordinates define the circle center points (start 和// destination).var gradient2 = context.createradialgradient( sx , sy , sr , dx , dy , dr );// adding colors to a radial gradient is the same as adding colors to linear // gradients.また、線形色の勾配、影、テキストを使用して、より複雑な例を準備しました。効果を図7に示します。
図7：線形色勾配を使用する例
キャンバスで何ができるかを知りたい場合は、次のプロジェクトを参照してください。
スケッチブック
デモ、オープンソース
フライト
Canvasは、HTML5の最も期待される機能の1つであり、ほとんどのWebブラウザーでサポートされています。キャンバスは、ゲームの作成とグラフィカルユーザーインターフェイスの強化に役立ちます。 2Dコンテキスト
APIは多くのグラフィックスの描画機能を提供します - この記事を通してキャンバスの使用について学んだことを願っています。