HTML5 の Canvas を使って素晴らしいグラフィックスを作成する

新しい機能により、単純な形状から印象的なアニメーションまで作成することができます

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

Ken Bluttman, Web Developer, Freelance Consultant

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



2011年 2月 08日

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 言語がどのように機能するかを理解していると役に立ちます。ただし、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 についての詳細は「参考文献」のリンクを参照。)

<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

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


最初の Canvas を作成する

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

図 1. ブランクの Canvas
ブランクの Canvas ですが、背景のスタイルによって Canvas が見えています。

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

リスト 1. Canvas を使用する Web ページの HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</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 のみです。
heightCanvas の高さを設定します。デフォルトは 150 ピクセルです。
widthCanvas の幅を設定します。デフォルトは 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)xy という位置にある、幅 w、高さ h の長方形を塗りつぶします。
strokeRect(x,y,w,h)xy という位置にある、幅 w、高さ h の長方形の枠を描画します。
moveTo(x,y)描画位置を座標 x、y に移動します。
lineTo(x,y)描画メソッドが終了した最後の位置から、x、y という位置まで直線を描画します。

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

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

視覚効果を高める

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

図 2. 複数の長方形が描画された Canvas
色の異なる複数の長方形が描画された 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>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<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 上の複数の長方形に透明度を設定する
Canvas 上の複数の長方形に透明度を設定する

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

リスト 3. 透明度を使用する
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<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 では、createLinearGradientcreateRadialGradient という 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>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<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>

複数の Canvas

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

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

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

リスト 6. 1 つの Web ページ上に複数の Canvas を描画する
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<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>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<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>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
</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 を使ってランダムな直線を無限に描画する
Canvas 上に描画されたアニメーション

まとめ

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

参考文献

学ぶために

製品や技術を入手するために

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=630743
ArticleTitle=HTML5 の Canvas を使って素晴らしいグラフィックスを作成する
publish-date=02082011