成する html5 の canvas を使って素晴らしいグラフィックス …html5...

© Copyright IBM Corporation 2011 商標HTML5 の Canvas を使って素晴らしいグラフィックスを作成するページ 1 / 17

HTML5 の Canvas を使って素晴らしいグラフィックスを作成する新しい機能により、単純な形状から印象的なアニメーションまで作成することができます

Ken BluttmanWeb DeveloperFreelance Consultant

2011年 2月 08日

Canvas を利用して Web ページを機能強化しましょう。Canvas は HTML5 の単純な要素ですが、強力な機能が満載されています。Canvas の柔軟性と豊富な機能を活用し、訪問者が繰り返し訪れる魅力的なサイトを作成しましょう。

HTML5 は、実績ある HTML4 を急速に置き換えつつある新しい標準です。HTML5 は W3C のワーキング・ドラフトであり、まだ策定が行われています。HTML5 には、現在の HTML バージョン 4.01仕様をサポートする一連の要素や属性が豊富に含まれています。また HTML5 には、Web ページのさまざまなコンテンツ (音声、動画、グラフィックスなど) および Web ページのさまざまな用途(データ・ストレージ、コンテンツ表示など) に適用可能な新しい要素や属性がいくつか導入されています。この記事では、HTML5 の新しいグラフィックス要素である canvas に焦点を絞ります。

新しく登場した HTML5 の Canvas は HTML ネイティブの描画パッドであり、JavaScript コードと組み合わせて使用され、サードパーティーのツールは使用していません。すべての Web ブラウザーで HTML5 が完全にサポートされているわけではありませんが、HTML5 が新たにサポートされつつある中で、Canvas は Windows® Internet Explorer® 以外の最近のすべてのブラウザーで既に実行されています。幸いなことに、Internet Explorer でも Canvas を使用できるようにするソリューションが登場しています。

canvas 要素は基本的に、何か視覚的なものを「ペイント」するまで白紙の状態です。Canvas には芸術家の絵筆の代わりに、さまざまなメソッドを使って思いのままに描画することができます。さらに、絵筆や絵の具では不可能な、アニメーションの作成や操作を Canvas 上で行うこともできます。

この記事では HTML5 の新しい canvas 要素について、単純に canvas 要素を含める方法からJavaScript による高度な対話動作 (アニメーションにとって重要です) まで順を追って説明し、Webページ上に Canvas を表示できるようにします。記事で対象としているのは Web デザイナーやWeb 開発者であり、JavaScript の知識は必須ではありませんが、JavaScript 言語がどのように機能

http://www.ibm.com/legal/copytrade.shtml

http://www.ibm.com/developerworks/jp/ibm/trademarks/

developerWorks® ibm.com/developerWorks/jp/

HTML5 の Canvas を使って素晴らしいグラフィックスを作成するページ 2 / 17

するかを理解していると役に立ちます。ただし、HTML の知識、特に基本的な Web ページの作成方法を理解していることが重要です。

この記事で説明した例のライブ・デモを見るためには、ブラウザーとインターネット接続が必要です。すべての例はライブ・デモとして Web サイトに公開されています (「参考文献」を参照)。

ブラウザーのサポート

どのブラウザーがどの程度 HTML5 をサポートしているかの判断は、状況が常に変化しているため、簡単ではありません。この記事の執筆時点で、Google Chrome、Apple Safari、Mozilla Firefoxはいずれも、新しい HTML5 要素の大部分をサポートしており、またすべてが canvas 要素をサポートしています。Internet Explorer は Internet Explorer 7 も 8 も HTML5 をサポートしていません。Internet Explorer 9 はベータ・テストの段階にあり、HTML5 をサポートしていますが、いくつかの問題があります。

当面の間、HTML5 非対応の Internet Explorer のバージョン用の修正パッチを入手することができます。この修正パッチは基本的に、JavaScript コードを使用して canvas 要素を作成するだけです。例えば、document.createElement('canvas') というスニペットを使用して、canvas タグとして認識されるものを作成することができます。ただし、この方法は単に canvas 要素を作成するにすぎません。これに対する一般的な対策として、Google が提供している ExplorerCanvas (略してexcanvas) という Canvas ベースの JavaScript ライブラリー全体を含める方法があります。それにはこのライブラリーをダウンロードして、外部ファイルとして以下のように参照します。(excanvasについての詳細は「参考文献」のリンクを参照。)



excanvas を含めることで、Internet Explorer で Canvas とそのメソッドの大部分をサポートすることができます。

最初の Canvas を作成する

Canvas は HTML タグにすぎないので、単純に canvas 要素をマークアップに含めると Canvas が表示されます。図 1 に示す最初の例は最も単純な形式の Canvas です。このように Canvas が表示されている理由は、style 属性によって色付けが指定され、width 属性と height 属性によってサイズが指定されているからにすぎません。

ibm.com/developerWorks/jp/ developerWorks®


図 1. ブランクの Canvas

このページのコードは短く簡潔です (リスト 1)。

リスト 1. Canvas を使用する Web ページの HTML<!DOCTYPE html><html><head><title>HTML5 Canvas Demo</title></head><body><div style="margin-left:30px;"><canvas id="myCanvasTag" width="400" height="400" style="background-color:blue;border: 10px yellow solid"></canvas><br /><br /><a href="index.html">back</a></div></body></html>

この Canvas は幅と高さがそれぞれ 400 ピクセルで、黄色い枠で囲まれており、背景は青です。Canvas 上には実際には何も描画されていません。描画は Canvas に含まれる JavaScript メソッドによって行われます。

Canvas のメソッド表 1 は Canvas のコンテキストに追加されるメソッドをいくつか示しています。

表 1. Canvas のメソッドメソッド使い方



getContext(contextId) Canvas 上に描画するために必要な API を公開します。利用可能なcontextID は (現状では) 2d のみです。

height Canvas の高さを設定します。デフォルトは 150 ピクセルです。

width Canvas の幅を設定します。デフォルトは 300 ピクセルです。

createLinearGradient(x1,y1,x2,y2) リニアに変化するグラデーションをつけます。開始点の座標はx1、y1、終了点の座標は x2、y2 によって設定されます。

createRadialGradient(x1,y1,r1,x2,y2,r2) 放射状に変化するグラデーションをつけます。円は座標 x1、y1、半径r1 で開始され、座標 x2、y2、半径 r2 で終了します。

addColorStop(offset, color) グラデーションにカラー・ストップを追加します。カラー・ストップというのは、グラデーション上で色の変化が始まる位置です。offset は0 と 1 の間の値でなければなりません。

fillStyle 領域を塗りつぶすための色を設定します。例えばfillStyle='rgb(255,0,0)' など。

strokeStyle 線を描画する場合の線の色を設定します。例えばfillStyle='rgb(255,0,0)' など。

fillRect(x,y,w,h) x、y という位置にある、幅 w、高さ h の長方形を塗りつぶします。

strokeRect(x,y,w,h) x、y という位置にある、幅 w、高さ h の長方形の枠を描画します。

moveTo(x,y) 描画位置を座標 x、y に移動します。

lineTo(x,y) 描画メソッドが終了した最後の位置から、x、y という位置まで直線を描画します。

より高度な Canvas アプリケーションを作成する

このセクションでは、いくつかの例について説明します。それぞれの例は順を追って機能が強化されていきます。

視覚効果を高める

まず、いくつかの長方形を Canvas 上に配置します。長方形は 4 つの辺が互いに直角をなす任意の形状であり、正方形は長方形のバリエーションの 1 つであることを思い出してください。図 2 はCanvas 上に表示された一連の長方形を示しており、それぞれの長方形はその直前に描画された長方形よりも小さくなっています。長方形の色はそれぞれ異なるため、各長方形を明瞭に区別できることに注意してください。

図 2. 複数の長方形が描画された Canvas

リスト 2 は図 2 の Canvas を作成するためのコードを示しています。それぞれの長方形は 2 行のコードによって作成されています。まず、fillStyle メソッドにより、赤、青、緑 (RGB) フォーマットを使って色を定義しています (fillStyle='rgb(255,0,0))。次に、fillRect メソッドによってサイズを定義しています (fillRect(50,50,300,300))。最初の 2 つの値で開始座標を設定し、後の 2 つの値で終了座標を設定しています。

リスト 2. JavaScript コードを使ってコンテキストを作成する方法と、さまざまなメソッドの使い方<!DOCTYPE html><html><head><title>HTML5 Canvas Demo</title><script> window.onload=function() { var mycanvas=document.getElementById("myCanvasTag"); var mycontext=mycanvas.getContext('2d'); mycontext.fillStyle='rgb(0,0,255)'; mycontext.fillRect(0,0,400,400); mycontext.fillStyle='rgb(255,0,0)'; mycontext.fillRect(50,50,300,300); mycontext.fillStyle='rgb(0,255,0)'; mycontext.fillRect(100,100,200,200); mycontext.fillStyle='rgb(100,100,100)'; mycontext.fillRect(125,175,150,25); }</script></head><body>



<div style="margin-left:30px;"><canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid"></canvas><br /><br /><a href="index.html">back</a></div></body></html>

Canvas 上に描画するためには、その canvas 要素に getContext('2d') を適用し、描画のためのメソッドを提供する API にアクセスします。下記のように document.getElementById メソッドを使用することで、その canvas 要素を JavaScript 変数に設定します。

var mycanvas=document.getElementById("myCanvasTag");

次に、その canvas 要素変数に getContext を適用します。下記はその例です。

var mycontext=mycanvas.getContext('2d');

コンテキストに対して変数が設定されると、すべてのメソッドを使用する準備が整ったことになります。

次の例では 2 つの方法を組み合わせます。まず始めに複数の長方形を重ねます。そのためにはfillRect パラメーターを使って長方形を配置します (図 3)。

図 3. Canvas 上の複数の長方形に透明度を設定する

次に透明度を追加します。これは RGB 色を操作する方法のバリエーションです。この方法では、rgb を使用する代わりに rgba を使用します。a は透明度を操作するアルファ・チャネルを表します。図 3 の例では、2 番目の長方形は透明度が 50% (つまり .5) に設定されており、3 番目の長

方形は透明度が 25% (つまり .25) に設定されています。リスト 3 は完全なマークアップを示しています。

リスト 3. 透明度を使用する

<!DOCTYPE html><html><head><title>HTML5 Canvas Demo</title><script> window.onload=function() { var mycanvas=document.getElementById("myCanvasTag"); var mycontext=mycanvas.getContext('2d'); mycontext.fillStyle='rgb(0,0,255)'; mycontext.fillRect(30,30,300,300); mycontext.fillStyle='rgba(0,255,0,0.5)'; mycontext.fillRect(60,60,300,300); mycontext.fillStyle='rgba(255,0,0,0.25)'; mycontext.fillRect(90,90,300,300); }</script></head><body><div style="margin-left:30px;"><canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid"></canvas><br /><br /><a href="index.html">back</a></div></body></html>

グラデーションは、調和の取れた形で色を変化させる技法です。Canvas では、createLinearGradient と createRadialGradient という 2 つのメソッドを使用してグラデーションを付けられるようになっています。図 4 はリニアに変化するグラデーションを示しています。addColorStop メソッドにより、グラデーション上での色と、その色がアクティブになる位置を指定します。グラデーションには複数のカラー・ストップを設定することができて互いに影響し合うため、この位置設定は主観的なものになります。カラー・ストップの位置設定の値は 0と 1 の間でなければなりませんが、テスト方法の違いやカラー・ストップの数により、値 (例えば .25) が同じままでも結果が異なる可能性があります。つまり、ある 1 つのカラー・ストップを .25 という位置に設定しても、他のカラー・ストップの設定位置により、該当の色がアクティブになるのは画像全体の 1/4 の位置よりも少しずれる場合があります。これは新しい実装であり、おそらくまだ問題の解決を行っている最中であることを忘れないでください。グラデーションの 1 つのメリットは、コードや結果が完全に調整されていない場合であっても常に魅力的なものになることです。



図 4. リニアに変化するグラデーション

図 4 のグラデーションはリスト 4 の JavaScript コードを使って作成したものです。

リスト 4. リニアに変化するグラデーションを作成する

var mycanvas=document.getElementById("myCanvasTag"); var mycontext=mycanvas.getContext('2d'); var mygradient=mycontext.createLinearGradient(30,30,300,300); mygradient.addColorStop(0,"、FF0000"); mygradient.addColorStop(1,"、00FF00"); mycontext.fillStyle=mygradient; mycontext.fillRect(0,0,400,400);

リスト 4 のカラー・ストップが、addColorStop メソッド自体からオンザフライで作成されたグラデーションのメソッドとして完全に実装されていることに注意してください。mygradient.addColorStop(0,"、FF0000") という文から、カラー・ストップには位置と色という 2 つのパラメーターがあることがわかります。

図 5 は放射状に変化するグラデーションを示しています。このグラデーション作成するためのコードはリスト 4 のコードと似ていますが、createLinearGradient メソッドの代わりにcreateRadialGradient メソッドが使われています。

図 5. 放射状に変化するグラデーション

図 5 の放射状に変化するグラデーションを作成するためのコードをリスト 5 に示します。5 つのカラー・ストップに注意してください。

リスト 5. 放射状に変化するグラデーションを作成する<!DOCTYPE html><html><head><title>HTML5 Canvas Demo</title><script> window.onload=function() { var mycanvas=document.getElementById("myCanvasTag"); var mycontext=mycanvas.getContext('2d'); var mygradient=mycontext.createRadialGradient(300,300,0,300,300,300); mygradient.addColorStop("0","magenta"); mygradient.addColorStop(".25","blue"); mygradient.addColorStop(".50","green"); mygradient.addColorStop(".75","yellow"); mygradient.addColorStop("1.0","red"); mycontext.fillStyle=mygradient; mycontext.fillRect(0,0,400,400); }</script></head><body><div style="margin-left:30px;"><canvas id="myCanvasTag" width="400" height="400" style="border: 10px blue solid"></canvas><br /><br /><a href="index.html">back</a></div></body></html>

複数の CanvasWeb ページには複数の Canvas を含めることができ、それぞれの Canvas は一意に決まる独自のJavaScript コンテキスト変数によって参照されます。そのため、それぞれの Canvas は他の Canvasとは独立して動作します。図 6 は、それぞれ異なる視覚効果を持つ 4 つの Canvas を示しています。

図 6. 1 つの Web ページ上に描画された複数の Canvas

リスト 6 は図 6 のページを作成するためのコードを示しています。それぞれの Canvas が一意の IDを持ち、それぞれのコンテキストが一意であることに注意してください。

リスト 6. 1 つの Web ページ上に複数の Canvas を描画する<!DOCTYPE html><html><head><title>HTML5 Canvas Demo</title><script> window.onload=function() { var mycontext1=document.getElementById("myCanvasTag1").getContext('2d'); var mycontext2=document.getElementById("myCanvasTag2").getContext('2d'); var mycontext3=document.getElementById("myCanvasTag3").getContext('2d'); var mycontext4=document.getElementById("myCanvasTag4").getContext('2d'); // gradient 1 var mygradient1=mycontext1.createLinearGradient(30,30,90,90); mygradient1.addColorStop(0,"、FF0000"); mygradient1.addColorStop(1,"、00FF00"); mycontext1.fillStyle=mygradient1; mycontext1.fillRect(0,0,100,100); // gradient 2 var mygradient2=mycontext2.createLinearGradient(30,30,90,90); mygradient2.addColorStop(1,"、FF0000"); mygradient2.addColorStop(0,"、00FF00"); mycontext2.fillStyle=mygradient2;



mycontext2.fillRect(0,0,100,100);

var mygradient3=mycontext3.createLinearGradient(30,30,90,90); mygradient3.addColorStop(0,"、0000FF"); mygradient3.addColorStop(.5,"、00FFDD"); mycontext3.fillStyle=mygradient3; mycontext3.fillRect(0,0,100,100);

var mygradient4=mycontext1.createLinearGradient(30,30,90,90); mygradient4.addColorStop(0,"、DD33CC"); mygradient4.addColorStop(1,"、EEEEEE"); mycontext4.fillStyle=mygradient4; mycontext4.fillRect(0,0,100,100); }</script></head><body><div style="margin-left:30px;"><canvas id="myCanvasTag1" width="100" height="100" style="border: 10px blue solid"></canvas><canvas id="myCanvasTag2" width="100" height="100" style="border: 10px green solid"></canvas><br /><canvas id="myCanvasTag3" width="100" height="100" style="border: 10px red solid"></canvas><canvas id="myCanvasTag4" width="100" height="100" style="border: 10px black solid"></canvas><br /><br /><a href="index.html">back</a></div></body></html>

JavaScript イベントとアニメーション

この記事では、Canvas で使用可能なさまざまなメソッドを紹介し、それぞれのメソッドによって視覚効果を作成してきました。今度はイベントとアニメーションを使って Canvas の使い方を一段上のレベルに引き上げてみましょう。JavaScript では、Web ページの特定の要素上でのマウスの移動やホバリングなどをはじめとする、さまざまなイベントを認識することができます。それらのイベントの使い方を以下の例で説明します。

イベントに対応する

図 7 に示す例は、これまでに挙げたリストで説明したメソッドを使って作成したものです。今度は新しい手法をいくつか追加します。図 7 に示す顔の、鼻、目、円状のアイテム、輪郭は、arc

メソッドを使って作成されています。まつげは直線として描画されており、口はベジェ曲線として作成されています。図 7 の Canvas の一番下には、fillText メソッドを使って作成されたテキストも表示されています。

図 7. JavaScript イベントを使ってウィンクした表情を作成する

リスト 7 は図 7 に使用されているコードを示しています。

リスト 7. イベントを使ってウィンクを作成する<!DOCTYPE html><html><head><title>HTML5 Canvas Demo</title><script>window.onload=function() { var mycanvas=document.getElementById("myCanvasTag"); var mycontext=mycanvas.getContext('2d');

//draw face mycontext.beginPath(); mycontext.arc(300, 250, 200, 0, Math.PI * 2, true); mycontext.closePath(); mycontext.stroke();

//draw left eye mycontext.beginPath(); mycontext.arc(220, 150, 30, 0, Math.PI * 2, true); mycontext.closePath(); mycontext.fillStyle='rgb(100,100,225)'; mycontext.fill();

//draw left iris mycontext.beginPath(); mycontext.arc(220, 150, 10, 0, Math.PI * 2, true); mycontext.closePath(); mycontext.fillStyle='rgb(0,0,0)'; mycontext.fill();



//draw left eyelid mycontext.beginPath(); mycontext.arc(220, 150, 30, 0, Math.PI, true); mycontext.closePath(); mycontext.fillStyle='rgb(200,200,200)'; mycontext.fill();

//draw left eyelashes mycontext.strokeStyle='rgb(0,0,0)'; lashes(mycontext,198, 170, 193, 185); lashes(mycontext,208, 177, 204, 193); lashes(mycontext,220, 180, 220, 195); lashes(mycontext,232, 177, 236, 193); lashes(mycontext,242, 170, 247, 185); mycontext.stroke();

openeye();

//draw right eyelashes mycontext.strokeStyle='rgb(0,0,0)'; lashes(mycontext, 358, 170, 353, 185); lashes(mycontext, 368, 177, 364, 193); lashes(mycontext, 380, 180, 380, 195); lashes(mycontext, 392, 177, 396, 193); lashes(mycontext, 402, 170, 407, 185); mycontext.stroke();

//draw nose mycontext.beginPath(); mycontext.arc(300, 250, 20, 0, Math.PI * 2, true); mycontext.closePath(); mycontext.stroke();

// draw smile mycontext.beginPath(); mycontext.lineWidth = 10; mycontext.moveTo(180, 320); mycontext.bezierCurveTo(140, 320, 340, 420, 400, 360); mycontext.closePath(); mycontext.stroke();

//draw message at bottom mycontext.font="1em sans-serif"; mycontext.fillStyle="rgb(0,0,0)"; mycontext.fillText("Move the mouse over and off the canvas - the face winks!", 10, 480);}

function lashes(cntx,x1,y1,x2,y2) { cntx.moveTo(x1,y1); cntx.lineTo(x2,y2);}

function closeeye() { //close right eye var mycanvas=document.getElementById("myCanvasTag"); var mycontext=mycanvas.getContext('2d'); mycontext.beginPath(); mycontext.arc(380, 150, 30, 0, Math.PI * 2, true); mycontext.closePath(); mycontext.fillStyle='rgb(200,200,200)'; mycontext.fill();}

function openeye() { //open right eye var mycanvas=document.getElementById("myCanvasTag");



var mycontext=mycanvas.getContext('2d'); mycontext.beginPath(); mycontext.arc(380, 150, 30, 0, Math.PI * 2, true); mycontext.closePath(); mycontext.fillStyle='rgb(100,100,225)'; mycontext.fill(); //draw right iris mycontext.beginPath(); mycontext.arc(380, 150, 10, 0, Math.PI * 2, true); mycontext.closePath(); mycontext.fillStyle='rgb(0,0,0)'; mycontext.fill(); //draw right eyelid mycontext.beginPath(); mycontext.arc(380, 150, 30, 0, Math.PI, true); mycontext.closePath(); mycontext.fillStyle='rgb(200,200,200)'; mycontext.fill();}</script></head><body><div style="margin-left:30px;"><canvas id="myCanvasTag" width="600" height="500" style="border: 5px blue solid" onmouseover="closeeye()" onmouseout="openeye()"></canvas><br /><br /><a href="index.html">back</a></div></body></html>

図 7 の表情の変化には JavaScript イベントが使われています。特に、onmouseover イベントとonmouseout イベントを使用し、それぞれ closeeye() 関数と openeye() 関数を呼び出しています。これらの関数は Canvas のメソッドではなく、標準的な JavaScript 関数です。イベントと関数との接続は canvas 要素自体によって行われます。このページの body セクションはリスト 7 のコードの一番下の方にあり、そこに canvas 要素があります。canvas タグ内には下記の属性があります。

onmouseover="closeeye()" onmouseout="openeye()"

リスト 7 のコードには新しい構成体である beginPath() と closePath() が使われており、異なる部分の複雑な描画アクションが明確に表されています。これらのコードで囲うことで、図の特定の部分の描画が他の描画アクションとは区別されるようにしています。

リスト 7 のコードで注目すべき事項は以下のとおりです。

• ページが開くと、openeye() 関数が呼び出され、右目が描画されます。• fillText メソッドを使って Canvas 上にテキストが書き込まれます。• arc メソッドの中で、MATH.PI * 2 は完全な円を作成し、一方 MATH.PI は円の一部 (まぶたな

ど) を作成します。

アニメーション

JavaScript には強力なプログラミング要素が満載されています。リスト 8 に示すように、JavaScript言語は非常に多様な操作を行うことができます。このコードは繰り返し実行され、Canvas 上に何本もの直線を描画します。直線の色はランダムに設定されます。

リスト 8. JavaScript を使ってアニメーションを作成する

<!DOCTYPE html><html><head><title>HTML5 Canvas Demo</title></head><body><div style="margin-left:30px;"><canvas id="myCanvasTag" width="400" height="400" style="border: 10px blue solid"></canvas><br /><br /><a href="index.html">back</a></div><script> var mycanvas = document.getElementById("myCanvasTag") var mycontext = mycanvas.getContext('2d'); var x; var y; var x2; var y2; var r; var g; var b; function line() { x=Math.floor(Math.random()*190) + Math.floor(Math.random()*190); y=Math.floor(Math.random()*190) + Math.floor(Math.random()*190); x2=Math.floor(Math.random()*190) + Math.floor(Math.random()*190); y2=Math.floor(Math.random()*190) + Math.floor(Math.random()*190); r=Math.floor(Math.random()*255); g=Math.floor(Math.random()*255); b=Math.floor(Math.random()*255); mycontext.moveTo(x, y); mycontext.lineTo(x2, y2); mycontext.strokeStyle='rgb(' + r + ',' + g + ',' + b + ')'; mycontext.lineWidth=Math.floor(Math.random()*6); mycontext.stroke(); mycontext.restore(); } setInterval(line, 100);

</script></body></html>

図 8 はアニメーションのスナップショットを示しています。リスト 8 のコードはこの記事で説明した他のどのコードとも異なり、JavaScript ブロックがページの一番下、canvas 要素の下に配置されています。こうすることで、必ず Canvas が描画されてから JavaScript のコードが実行されることになります。



図 8. JavaScript を使ってランダムな直線を無限に描画する

まとめ

HTML5 は Web 開発の様相を変えようとしています。新しい要素により、ページ・レイアウトが容易になるだけでなく、ブラウザーでのローカル・データ・ストレージが可能になり、音声、動画、グラフィックスのための Canvas のようなネイティブ・プラットフォームが実現されています。ブラウザーが更新され、より多くの新機能に対応するようになるにつれ、Web によってもたらされるユーザー・エクスペリエンスが一層刺激的なものになるはずです。Web 開発にとって素晴らしい時代が待ち受けています。



著者について

Ken Bluttman

Ken Bluttman は、コンピューター関連の本を 10 数冊執筆しており、その内容はデスクトップ・アプリケーション開発から最新の Web 開発、設計、アーキテクチャーに至るまで多岐にわたっています。

© Copyright IBM Corporation 2011(www.ibm.com/legal/copytrade.shtml)商標(www.ibm.com/developerworks/jp/ibm/trademarks/)

http://www.ibm.com/legal/copytrade.shtml

http://www.ibm.com/developerworks/jp/ibm/trademarks/

成する html5 の canvas を使って素晴らしいグラフィックス …html5...

Documents