Canvas チュートリアル リダイレクト 2

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

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

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

始める前に

<canvas> を使うことはとても難しいわけではありませんが、HTMLJavaScript の基本的な理解が必要です。

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

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

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

関連情報

  1. Canvas トピックのページ
  2. canvas を使って図形を描く
  3. Canvas の実例
  4. canvas への文字の描画

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

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

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

最終更新者: ethertank,