canvas チュートリアル

<canvas> 要素は、スクリプト(一般的に JavaScript) を使って図形を描くために使われる新しい HTML 要素です。例えば、グラフを描く、写真を合成する、または簡単な(またはあまり簡単ではない)アニメーションに使うことができます。右の画像は後でこのチュートリアルの中でみる <canvas> を実際に使った例です。

<canvas> は Apple によって Mac OS X の Dashboard のために初めて導入され、後に Safari に実装されました。Firefox 1.5 のような Gecko 1.8 ベースのブラウザもこの新しい要素をサポートしています。 <canvas> 要素は HTML5 としても知られる WhatWG Web applications 1.0 仕様の一部です。

このチュートリアルでは、あなたの HTML ページに <canvas> 要素を導入する方法を説明します。提供する例は、 <canvas> で出来ることの、いくつかの明確なアイデアを与え、それをあなた自身で実装できるようにするために使うことができます。

始める前に

<canvas> を使うことはそれほど難しくはありませんが、HTMLJavaScript の基本的な理解が必要です。

上述のように、 <canvas> 要素は全てのモダンブラウザでサポートされているわけではないため、例を見るには Firefox 1.5 か他の最近の Gecko ベースブラウザ、Opera 9 、または最近のバージョンの Safari か Google Chrome が必要になるでしょう。

このチュートリアルの一覧

  1. 基本的な使いかた
  2. 図形を描く
  3. 画像を使う
  4. スタイルと色を適用する
  5. 変形
  6. 合成
  7. 基本的なアニメーション
  8. canvas の最適化

関連情報

canvas に関する外部情報(日本語)

canvas に関する外部情報(英語)

ドキュメントのタグと貢献者

 このページの貢献者: ethertank
 最終更新者: ethertank,