English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 基礎教程

HTML5 API

HTML5 メディア

HTML5 図形

HTML5 キャンバス

キャンバスはHTMLの5 スクリプト（通常はJavaScript）で描画できるHTML要素が追加されました。これは写真集を作成したり、シンプル（それほどシンプルではありません）なアニメーションを作成したり、リアルタイムビデオ処理とレンダリングを行ったりできます。

<canvas>タグはグラフや他の画像などのグラフィックを定義します。グラフィックを描画するには、スクリプト（通常はJavaScript）を使用する必要があります。

キャンバス上に赤い矩形、グラデーション矩形、カラフルな矩形、そしてカラフルなテキストを描画します。

あなたのブラウザはHTMLをサポートしていません5 の <canvas> 要素.

canvasとは何ですか？

HTML5 <canvas>要素はグラフィックの描画に使用され、スクリプト（通常はJavaScript）を通じて完了されます。

<canvas>タグは画像の容器に過ぎず、グラフィックを描画するにはスクリプト（通常はJavaScript）を使用する必要があります。

canvasを使用して、様々な方法でパス、ボックス、円、文字および画像を描画できます。

ブラウザのサポート

テーブルの数字は<canvas>要素をサポートする最初のブラウザバージョン番号を示します。

要素




<canvas>4.09.02.03.19.0

キャンバス（Canvas）の作成

キャンバスはウェブ上の矩形フレームであり、<canvas>要素を使用して描画されます。

注意: デフォルトでは<canvas>要素には枠や内容がありません。

<canvas>の簡単な例:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: タグは通常id属性を指定する必要があります（スクリプトでよく参照されます）: widthおよびheight属性はキャンバスの大きさを定義します。

ヒント:HTMLページ内で複数の<canvas>要素を使用できます。

style属性を使用して枠を追加します：

<!DOCTYPE　html><html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアルウェブ(oldtoolbag.com)</title>/title>　
</head>
<body>
<canvas　id="myCanvas"　width="200"　height="100"
style="border:1px solid #000000;">
</canvas>
</body>
</html>
テストをしてみる ‹/›

JavaScriptを使用して画像を描画

canvas要素自体には描画能力がありません。すべての描画作業はJavaScript内部で行われます：

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>/title>　
</head>
<body>
<canvas　id="myCanvas"　width="200"　height="10"　style="border:1px solid #c3c3c3>
あなたのブラウザはHTMLをサポートしていません5　canvasタグ。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
テストをしてみる ‹/›

例解:

まず、<canvas>要素を見つけます：

var c=document.getElementById("myCanvas");

次に、contextオブジェクトを作成します：

var ctx=c.getContext("2d);

getContext("2d") オブジェクトは内蔵のHTML5 オブジェクトは、様々な描画パス、矩形、円、文字および画像を追加する方法を持ちます。

以下の二行のコードは赤い矩形を描画します：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

fillStyle属性を設定することでCSS色、グラデーション、またはパターンを使用できます。 デフォルトの設定は#000000（黒）です。

fillRect(x,y,width,height) メソッドは矩形の現在の塗りつぶし方法を定義します。

キャンバス座標

キャンバスは二つの次元のグリッドです。

キャンバスの左上角座標は (0,0) です。

上記の fillRect メソッドには、パラメータ (0,0,150,75)。

これは、キャンバス上に描画するという意味です。 150x75 の矩形、左上隅から始まる (0,0)。

座標例

以下の図のように、キャンバスのXとY座標はキャンバス上での描画の位置を決定するために使用されます。マウスの移動中の矩形ボックスには、位置座標が表示されます。

X
Y

キャンバス - パス

Canvas上に線を描画する際には以下の2つのメソッドを使用します：

  • moveTo(x,y)を定義する

  • lineTo(x,y)を定義する

ラインを描画する際には「ink」メソッドを使用する必要があります。例えば、stroke()などです。

例

始点座標(0,0)、終点座標 (200,100)。それから stroke() メソッドを使用してラインを描画します：

あなたのブラウザはHTMLをサポートしていません5 の <canvas> 要素.

JavaScript:

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>/title>　
</head>
<body>
<canvas　id="myCanvas"　width="200"　height="10"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません5　canvas　タグ。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
テストをしてみる ‹/›

Canvas上に円を描画する際には以下のメソッドを使用します：

arc(x,y,r,start,stop)

実際には円を描画する際に「ink」メソッドを使用しています。例えば、stroke()やfill()などです。

例

arc() メソッドを使用して円を描画する

あなたのブラウザはHTMLをサポートしていません5 の <canvas> 要素.

JavaScript:

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>/title>　
</head>
<body>
<canvas　id="myCanvas"　width="200"　height="10"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません5　canvas　タグ。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>　
</body>
</html>
テストをしてみる ‹/›

キャンバス - テキスト

キャンバスでテキストを描画する際には、以下の重要な属性とメソッドがあります：

  • font - フォントを定義する

  • fillText(text,x,y) - キャンバス上に実心的テキストを描画する

  • strokeText(text,x,y) - キャンバス上に空心的テキストを描画する

使用 fillText():

例

キャンバス上に "Arial" フォントで高 30px の文字（实心）：

あなたのブラウザはHTMLをサポートしていません5 の <canvas> 要素.

JavaScript:

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>/title>　
</head>
<body>
<canvas　id="myCanvas"　width="200"　height="10"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません5　canvas　タグ。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
ctx.font="30px　Arial";
ctx.fillText("Hello　World",10,50);
</script>
</body>
</html>
テストをしてみる ‹/›

使用 strokeText():

例

キャンバス上に "Arial" フォントで高 30px の文字（空心）：

あなたのブラウザはHTMLをサポートしていません5 の <canvas> 要素.

JavaScript:

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>/title>　
</head>
<body>
<canvas　id="myCanvas"　width="200"　height="10"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません5　canvas　タグ。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
ctx.font="30px　Arial";
ctx.strokeText("Hello　World",10,50);
</script>
</body>
</html>
テストをしてみる ‹/›

キャンバス - 　グラデーション

グラデーションは矩形、円、ライン、テキストなど、さまざまな形状に塗り分けることができ、各形状には異なる色を定義できます。

Canvasグラデーションを設定するには以下の2つの異なる方法があります：

  • createLinearGradient(x,y,x1,y1) - ライングラデーションを作成する

  • createRadialGradient(x,y,r,x1,y1,r1) - 径向グラデーションを作成する/円グラデーション

グラデーションオブジェクトを使用する場合、2種類以上の停止色を使用する必要があります。

addColorStop()メソッドで色の停止を指定し、パラメータには座標を使用して描述します。0から1.

グラデーションを使用して、fillStyleやstrokeStyleの値を設定します。 グラデーションを使用して、形状（矩形、テキスト、線など）を描画します。

createLinearGradient()を使用して：

例

線形グラデーションを作成する。グラデーションで矩形を塗りつぶす：

あなたのブラウザはHTMLをサポートしていません5 の <canvas> 要素.

JavaScript:

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>/title>　
</head>
<body>
<canvas　id="myCanvas"　width="200"　height="10"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません5　canvas　タグ。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
//　グラデーションを作成する
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//　グラデーションで塗りつぶす
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
テストをしてみる ‹/›

createRadialGradient()を使用して：

例

径向グラデーションを作成する/円形グラデーション。グラデーションで矩形を塗りつぶす：

あなたのブラウザはHTMLをサポートしていません5 の <canvas> 要素.

JavaScript:

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>/title>　
</head>
<body>
<canvas　id="myCanvas"　width="200"　height="10"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません5　canvas　タグ。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
//　グラデーションを作成する
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//　グラデーションで塗りつぶす
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
テストをしてみる ‹/›

キャンバス - 画像

画像をキャンバスに配置する、以下のメソッドを使用します:

  • drawImage(image,x,y)

使用する画像:

例

画像をキャンバスに配置する:

あなたのブラウザはHTMLをサポートしていません5 の <canvas> 要素.

JavaScript:

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>/title>　
</head>
<body>
<p>使用する画像:</p>
<img　id="scream"　src="img_the_scream.jpg"　alt="The　Scream"　width="220"　height="277><p>Canvas:</p>
<canvas　id="myCanvas"　width="250"　height="3"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません5　canvas　タグ。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
var img = document.getElementById("scream");

　　　　ctx.drawImage(img,10,10);
}　
</script>
</body>
</html>
テストをしてみる ‹/›

HTML Canvas 参考マニュアル

タグの完全な属性については、以下を参照してくださいCanvas 参考マニュアル.

HTML <canvas> タグ

タグ説明
<canvas>HTML5 のcanvas要素を使用して、JavaScriptでウェブページ上に画像を描画します。
HTML5 内線SVGHTML5 新しい要素