canvas チュートリアル

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

このチュートリアルでは、2D グラフィックスを描画するために <canvas> を使用する方法を、基礎から説明します。提供する例は、<canvas> で出来ることの、いくつかの明確なアイデアと、それをあなた自身で実装できるようにするためのコードスニペットを提供します。

<canvas> は Apple によって OS X の Dashboard のために WebKit へ初めて導入され、後にブラウザに実装されました。現在は、あらゆる主要ブラウザがサポートしています。

始める前に

<canvas> を使うことはそれほど難しくはありませんが、HTMLJavaScript の基本的な理解が必要です。一部の古いブラウザは <canvas> 要素をサポートしていませんが、最近のバージョンの主要ブラウザはすべてサポートしています。canvas のデフォルトのサイズは、300 px × 150 px (幅 × 高さ) です。しかし、HTML の height および width プロパティを使用して、独自のサイズを定義することができます。canvas にグラフィックスを描画するためには、JavaScript コンテキストオブジェクトを使用します。このオブジェクトは、グラフィックスをオンザフライで生成します。

チュートリアル

関連情報

貢献者への注記

2013 年 6 月 17 日の週に発生した不運な技術的エラーにより、すべての過去の貢献者の属性を含む、このチュートリアルの履歴情報が失われました。この問題についておわびするとともに、この不運な事故を容赦願います。

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

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