HTML 5 Canvas 要素の概要

[アーティクル]
10/20/2021

HTML 5 <canvas> 要素 (英語) に馴染みのない皆さんのために説明すれば、これは何らかの描画を実行できる長方形の領域です。これは非常に洗練された強力な機能です。つまり、Photoshop、GIMP、Paint.net などのイメージ作成ツールに依存してグラフィックを生成しなくても、ネイティブの要素を使用してグラフィックを生成できるようになったということです。

<canvas> 要素を見ると、その形式は他の HTML 要素と同様です。

<canvas id="can1" width="300" height="300"></canvas>

他のほとんどの HTML 要素と同様に、要素といくつかの属性を定義します。この例では、"id" と共に、長方形描画領域の幅と高さを割り当てています。"id" を割り当てるのは、後から JavaScript でこの要素を参照し、描画を開始するために必要なメソッドを呼び出せるようにするためです。

私はピカソではないので、デザイン作業よりプログラミングに目が行きがちです。デザイン作業はクリエイティブな才能を持つ皆さんに任せて、ここでは何か色付きの図を描いてみます。

最初に、<canvas> 要素への参照を作成する必要があります。"id" 属性を要素に追加したことを思い出してください。ここでは、次のコードを使用できます。

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

また、jQuery なら次のように記述できます。

var myCanvas = $( "#can1" )[0];

この小さなデモは jQuery ライブラリのシンタックスシュガーをすべて必要とするほどではないので、従来の JavaScript を使用しましょう。

次に、要素の getContext() メソッドを使用して、この要素のレンダリングコンテキストを取得します。これは、実際に描画を行う <canvas> 要素内の領域です。キャンバスと同じサイズである必要はありませんが、その中に収まる必要があります。

var myContext = myCanvas.getContext( "2d" );

パラメーターとして "2d" を指定するのは、それが現在の仕様でサポートされている唯一のレンダリングコンテキストだからです。つまり、平面の図だけを描くことができます。

これでレンダリングコンテキストを取得できたので、図を描いてみます。fillStyle プロパティと strokeStyle プロパティを使用して、図の指定領域の塗りつぶしの色と境界線の色を指定します。次に、strokeRect() メソッドと fillRect() メソッドを使用し、上のプロパティで定義した色を使用して変更を適用します。

myContext.fillStyle   = '#00f';
myContext.strokeStyle = '#f00';
myContext.lineWidth   = 4;
myContext.strokeRect( 0,0,300,300);
myContext.fillRect(0, 0, 300, 300);

これで、赤い線で囲まれた青いボックスが作成されます。大した図ではありませんが、これを HTML と JavaScript で描くことができるという点が重要です。

図 1

次に、この図に手を加えていきます。ここでは、キャンバスのレンダリングコンテキスト内に図形を作成します。そのために、最初に moveTo() メソッドを使用して開始点の位置を定めます。2 つのパラメーターは、レンダリングコンテキスト内の "x,y" 座標です。ここでは、上辺の中央を開始点とします。

myContext.moveTo( 150, 0 );

次に lineTo() メソッドを使用して、次の "x,y" 座標まで線を描きます。線ごとに moveTo() メソッドを使用して開始点の位置を定める必要はありません。

myContext.lineTo( 0, 150 );
myContext.lineTo( 150, 300 );
myContext.lineTo( 300, 150 );
myContext.lineTo( 150, 0 );

このコードで次のような四角形が描かれます。

図 2

最後に、fillStyle プロパティと strokeStyle プロパティをそれぞれ別の色に変えます。

myContext.fillStyle   = '#F63806';
myContext.strokeStyle = "#000";

次に、fill() メソッドと stroke() メソッドを使用して、色の変更を新しい図に適用します。

myContext.fill();
myContext.stroke();

図 3

できました!!この図では、オークションで $1,000,000 ドルを稼ぐのは無理ですし、Esty (英語) では $1.50 にもなりませんが、これが最初の一歩です。ここで描いたのは実に簡単な図ですが、Canvasdemos.com (英語) を訪れれば、<canvas> の真の能力を理解することができるでしょう。このサイトには、<canvas> を使用して構築されたすばらしいデモの他に、この要素を短時間で理解できるチュートリアルも用意されています。

特に注目すべき点は、<canvas> を使用すれば特別なプラグインなしで新しいゲームを配布できるため、ゲーム業界がこの要素に注目しているということです。たとえば、<canvas> を使用してゲームを作成する方法を示したチュートリアル (英語) もあります。専用のコンソールや PC ゲームにはかないませんが、この要素は FarmVille や PacMan に続くゲームを自作できるだけの可能性は確実に秘めています。

最後に、このチュートリアルで作成したコードを示します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="noindex" />
  <title>Canvas Test</title>
</head> 
 
<body> 
 
<canvas id="can1" width="300" height="300"></canvas>
 
  <script type="text/javascript">
  var myCanvas = document.getElementById( "can1" );
  var myContext = myCanvas.getContext( "2d" );
  myContext.fillStyle   = '#00f';
  myContext.strokeStyle = '#F63806';
  myContext.lineWidth   = 4;
  myContext.fillRect(0, 0, 300, 300);
  myContext.strokeRect( 0,0,300,300);
 
  myContext.moveTo( 150, 0 );
  myContext.lineTo( 0, 150 );
  myContext.lineTo( 150, 300 );
  myContext.lineTo( 300, 150 );
  myContext.lineTo( 150, 0 );      
 
  myContext.fillStyle   = '#F63806';
  myContext.strokeStyle = "#000";
 
  myContext.fill();
  myContext.stroke();
 
  </script>
 
</body>
</html>

ページのトップへ

次の方法で共有

HTML 5 Canvas 要素の概要

その他のリソース