ホーム > html, javascript > [JavaScript]canvas要素でビジュアルな画像を(1) ~基本的な使い方~

[JavaScript]canvas要素でビジュアルな画像を(1) ~基本的な使い方~

今回はHTML5で脚光を浴びるであろうcanvas要素の基本について紹介する。

・概要

HTMLはウェブ関連技術の標準団体「W3C」(World Wide Web Consortium)によって定められていて、現在はHTML4だが2010年からHTML5が正式にリリースされるらしい。

【参考】
HTML5が持つ本当の意味:http://www.atmarkit.co.jp/news/200801/25/html.html

HTML5草案:http://www.w3.org/html/wg/html5/

canvas要素は決して新しくないがあまり使われていないのが事実。
しかし使いこなせばこんなこともできるらしいw

【参考】
Canvascape – 3D Walker:http://www.abrahamjoffe.com.au/ben/canvascape/
Canvas 3D Rendererデモ:http://tapper-ware.net/canvas3d/

canvas要素はWeb ページ上でインタラクティブな画像生成を行う技術で、従来 Java や Flash などを使わなければできなかったようなビジュアル的表現が、プラグインや特殊なツールなしで実現できる。
しかし、現在ではIEではcanvas要素に対応しておらず、Safari,Opera9,Firefox1.5などで使えるらしい。

・canvasを利用する流れ

まずはcanvas要素で描画領域を確保し、JavaScriptを用いて描画領域に図形を描画する。
canvas要素での描画領域の確保は以下のようにする。

  1.  <canvas  id="mycanvas" width="200" height="200">代替文章</canvas>

javascriptでcanvas要素を使うのでidを指定する。width,heightは描画領域のサイズでこれは必須らしい。IEなどのcanvas要素が使えないブラウザではcanvasタグにはさまれた代替文章が表示されるので入力しておいて方がよいかも。
</canvas>の閉じタグを忘れるとの後の部分が表示されないので注意すること。

次にJavaScriptでcanvas要素のオブジェクトにgetContextというメソッドを呼び出し、オブジェクトを取得する。

  1.  var canvas = document.getElementById("mycanvas");
  2.  var context = canvas.getContext("2d");

最後に描画コンテキストに実装されたメソッドも用いてcanvas内に描画していく。
サンプルは以下

  1.  <html>
  2.  <head>
  3.  <meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">
  4.  <title>test</title>
  5.  <script type="text/javascript">
  6.  <!--
  7.  function inite() {
  8.  var canvas = document.getElementById("mycanvas");
  9.  if(!canvas.getContext) {
  10.  // canvas対応ブラウザではないとき
  11.  return;
  12.  } else {
  13.  var ctx = canvas.getContext("2d");
  14.  ctx.fillStyle = "rgb(200,0,0)";
  15.  ctx.fillRect (30, 30, 50, 50);
  16.  
  17.  // パスを使って三角形を描く
  18.  ctx.beginPath();
  19.  ctx.moveTo(70, 70);
  20.  ctx.lineTo(105,120);
  21.  ctx.lineTo(25,125);
  22.  ctx.lineTo(70, 70);
  23.  ctx.stroke();
  24.  
  25.  // 円弧(円)
  26.  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  27.  ctx.beginPath();
  28.  ctx.arc(100, 100, 50, 0, 2*Math.PI, true);
  29.  ctx.fill();
  30.  }
  31.  }
  32.  // -->
  33.  </script>
  34.  </head>
  35.  <body onload="inite()">
  36.  <canvas id="mycanvas" width="150" height="150"></canvas>
  37.  </body>
  38.  </html>

実行結果はこちら
描画コンテキストのメソッドについては次回に詳しく触れる。

カテゴリー: html, javascript タグ: ,
  1. コメントはまだありません。
  1. トラックバックはまだありません。

Get Adobe Flash player