--- title: Canvas チュートリアル slug: Web/API/Canvas_API/Tutorial tags: - Canvas tutorial - HTML - HTML5 - 'HTML:Canvas' - Tutorials translation_of: Web/API/Canvas_API/Tutorial translation_of_original: Canvas-tutorial-broken ---
<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>
を使うことはとても難しいわけではありませんが、HTML と JavaScript の基本的な理解が必要です。
上述のように、<canvas>
要素は全てのモダンブラウザでサポートされているわけではないため、例を見るには Firefox 1.5 か他の最近の Gecko ベースブラウザ、Opera 9、もしくは最近のバージョンの Safari が必要になるでしょう。