@ HTML

canvas 要素

canvas 要素はスクリプト(一般的にJavaScript)を使って図形を描くために使われる HTML 要素です。例えば、グラフを描く、写真を合成する、またはアニメーションに使用します。

canvas 要素を使った図形の描画は以下の手順で行います。

  1. HTML にcanvas 要素を記述する。
  2. JavaScript で canvas 要素を取得する。
  3. canvas 要素からコンテキストを取得する。
  4. コンテキストのプロパティやメッソドを利用して描画する。
    ※コンテキストは canpas 要素に描画をするためのオブジェクトです。

canvas 要素の書式

以下のように記述すると、幅300px、高さ300pxの canvas 要素が定義されます。

elements_canvas

<canvas id="canvas1" width="300" height="300"></canvas>

canvas 要素の id 属性は、Javascript などのスクリプトで、どの canvas 要素に対して処理を行うのかを特定する際に必要となります。

canvas 要素への描画 – 基本テンプレート

canvas 要素と Javascript を連携させて HTML で使用するための基本となるテンプレートを以下に示します。

elements_canvas_basic

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
function draw() {
  var canvas = document.getElementById('canvas1');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
  }
}
</script>
</head>

<body onload="draw();">
  <canvas id="canvas1" width="300" height="300" style="border:1px solid #ccc;"></canvas>
</body>

</html>

矩形の描画

まず始めに、矩形(四角形)を描画してみましょう。canvas 要素では矩形を描くために3つのメソッドが用意されています。

矩形を描画する2dコンテキストのメソッド
メソッド 説明
fillRect(x, y, w, h) 塗りつぶしの四角形を描く
strokeRect(x, y, w, h) 四角形の輪郭を描く
clearRect((x, y, w, h) 領域を削除する

elements_canvas_rect

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<script>
function draw() {
  // canvas 要素を取得
  var canvas = document.getElementById('canvas1');
  if (canvas.getContext) {
    // 描画用のコンテキストを取得
    var ctx = canvas.getContext('2d');
    // コンテキストを利用して描画を行う
    ctx.fillRect(50,50,200,200);
    ctx.strokeRect(20,20,180,260);
    ctx.clearRect(100,80,120,140);
  }
}
</script>
</head>

<body onLoad="draw()">
  <canvas id="canvas1" width="300" height="300" style="background-color:#ffffff;">
    図形を表示するには、canvasタグをサポートしたブラウザが必要です。
  </canvas>
</body>

</html>

demo

線と塗り

canvasでは、線と塗りを指定してビットマップ画像を描画することができます。

線と塗りを指定して図形を描画する場合は以下の手順で行います。

  1. strokeStyleプロパティで線の色を指定する
  2. lineWidthプロパティで線の太さを指定する
  3. fillStyleプロパティで塗り色をしていする
  4. rect()メソッドを使って領域を指定
  5. stroke()メソッドを使って線を描画
  6. fill()メソッドを使って塗りを描画
「線」と「塗り」を指定する2dコンテキストのプロパティ
strokeStyle ストローク(線)の色(またはスタイル)を指定
lineWidth 線の太さを指定
lineCap 線の終端の形状を指定(butt/round/square)
lineJoin 線のつなぎ目の形状を指定(bevel/round/miter)
miterLimit lineJoinがmiterの場合に結合部分の長さを指定
fillStyle 塗りの色(またはスタイル)を指定

線と塗りを指定した矩形(四角形)の描画

canvas_line.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
function draw() {
  // canvas 要素を取得
  var canvas = document.getElementById('canvas1');
  if (canvas.getContext) {
    // 描画用のコンテキストを所得
    var ctx = canvas.getContext('2d');
    // コンテキストを利用して描画を行う
    ctx.strokeStyle = 'rgb(00,00,00)'; // 線の色を黒に指定
    ctx.lineWidth = 15; // 線の太さを15pxに指定
    ctx.lineJoin = 'round'; // つなぎ目の形状をroundに指定
    ctx.fillStyle = 'rgb(255,00,00)'; // 塗り色を赤に指定
    ctx.rect(50,50,200,200);// 左から50上から50の位置に、幅200高さ200のの矩形と枠線を描く
    ctx.stroke(); // 線を描画
    ctx.fill(); // 塗りを描画
  }
}
</script>
</head>

<body onLoad="draw()">
  <canvas id="canvas1" width="300" height="300" style="background-color:#ffffff;">
    図形を表示するには、canvasタグをサポートしたブラウザが必要です。
  </canvas>
</body>

</html>

demo

色の指定方法

HTML の色指定と同じように、カラーネーム、カラーコード、RGBで色を指定することができます。

色の指定方法
形式 説明
#RRGGBB 16進数で指定
カラーネーム red/blue/green などのカラーネームで指定
rgb(RGB) R,G,Bを0-255の数値で指定
rgba(RGBA) R,G,Bに加え透明度A(0.0~1)

いろいろな色の指定

canvas_fill_color.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
function draw() {
  var canvas = document.getElementById("canvas1");
  var ctx = canvas.getContext("2d");
  // [1] カラーネームで指定
  ctx.fillStyle = "red";
  ctx.fillRect(0,0,100,300);
  // [2] #RRGGBB形式で指定
  ctx.fillStyle = "#0000FF";
  ctx.fillRect(100,0,100,300);
  // [3] rgb(R,G,B)形式で指定
  ctx.fillStyle = "rgb(0,255,0)";
  ctx.fillRect(200,0,100,300);
}
</script>
</head>

<body onLoad="draw()">
  <canvas id="canvas1" width="300" height="300" style="background-color:#ffffff;">
    <p>図形を表示するには、canvasタグをサポートしたブラウザが必要です。</p>
  </canvas>
</body>

</html>

demo

カラーチャートを描画する

つぎの例では、for ループを使って、18×18個のタイルを画面に描画します。

RGB それぞれの色合いを計算式で求め、文字列で RGB を指定します。

canvas_fill_color2.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
function draw() {
  var canvas = document.getElementById("canvas1");
  var ctx = canvas.getContext("2d");
  // 18x18個の正方形を描く
  for (var i = 0; i < 324; i++) {
    // 計算で色を決定する
    var x = (i % 18), y = Math.floor(i / 18);
    var r = Math.floor(x * 14);
    var g = Math.floor(y * 14);
    var b = (i % 2) * 255;
    ctx.fillStyle = "rgb(" + r + "," + g + "," +  b + ")";
    // 描画
    ctx.fillRect(x*16, y*16, 14, 14);
  }
}
</script>
</head>

<body onLoad="draw()">
  <canvas id="canvas1" width="300" height="300" style="background-color:#ffffff;">
    <p>図形を表示するには、canvasタグをサポートしたブラウザが必要です。</p>
  </canvas>
</body>

</html>

demo

パスの描画

直線の描画

canvas 要素では矩形以外の図形を描画するには、一つ以上のパスを組み合わせて作らなくてはなりません。

パスを使用して図形を描画するためのメソッドには、次のようなものがあります。

  • beginPath() – パスの開始
  • closePath() – パスを閉じる(始点に向けて直線を描くことで図形を閉じる)
  • stroke() – 線でパスを描く
  • fill() – 塗り潰しでパスを描く
  • moveTo(x, y) – パスの始点を移動する
  • lineTo(x, y) – 直線を描画する

canvas_path.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
function draw() {
  // canvas 要素を取得
  var canvas = document.getElementById('canvas1');
  if (canvas.getContext) {
    // 描画用のコンテキストを所得
    var ctx = canvas.getContext('2d');
    /* パスを初期化 */
    ctx.beginPath();
    /* サブパスを作る */
    ctx.beginPath();
    ctx.moveTo(250, 10);
    ctx.lineTo(180, 230);
    ctx.lineTo(10, 280);
    ctx.closePath();
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fill();
  }
}
</script>
</head>

 <body onLoad="draw()">
  <canvas id="canvas1" width="300" height="300" style="background-color:#fff;">
    図形を表示するには、canvasタグをサポートしたブラウザが必要です。
  </canvas>
</body>

</html>

demo

ベジェ曲線の描画

bezierCurveTo() メソッドを使ってベジェ曲線を描くことができます。
ベジェ曲線とは、制御点(control point)を用いて描画される曲線です。

format

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
bezierCurveTo()メソッドのパラメータ値
パラメータ 説明
cp1x 最初の controlpoint の x 座標
cp1y 最初の controlpoint の y 座標
cp2x 2番目の controlpoint の x 座標
cp2y 2番目の controlpoint の y 座標
x 線を引く場所の x 座標
y 線を引く場所の y 座標

ベジェ曲線を描画する場合は以下のような流れになります。

  1. beginPath()で現在のパスをリセットする
  2. moveTo(x, y)でパスの開始座標を指定する
  3. bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)で座標を指定して3次ベジェ曲線を引く
  4. stroke()で現在のパスを輪郭表示する

canvas_bezier.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>sampla</title>
<script>
function draw() {
  var myCanvas = document.getElementById('canvas1');
  var ctx = myCanvas.getContext('2d');

  ctx.beginPath();
  ctx.moveTo(30, 30);
  ctx.lineTo(280, 180);
  ctx.bezierCurveTo(60, 90, 80, 120, 70, 300);

  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fill();
}
</script>
</head>

 <body onload="draw();">
  <canvas id="canvas1" width="300" height="300"  style="background-color:#ffffff;">
    図形を表示するには、canvasタグをサポートしたブラウザが必要です。
  </canvas>
</body>

</html>

demo

円の描画

canvas 要素を利用して円形を描画することができます。円を描くためには arc() メソッドを使います。

format

context.arc(x, y, radius, startAngles, endAngles, anticlockwise)
arc() メソッドの 5 つの引数
引数  
x,y 円の中心のX座標,円の中心のY座標
radius 半径
startAngle 開始角度(単位はラジアン)
endAngle 終了角度(単位はラジアン)
anticlockwise 逆時計周りに角度を指定するかどうか(true/false)

角度はラジアンで指定します。円の時には 開始角度, 終了角度,は 0, Math.PI*2, になります。Math.PI*2 は 2π のことです。

360°法との関係は、半径1の円の円周が2πで、その中心角が2π(rad)なので下記のようになります。

360° PI*2ラジアン
180° PIラジアン
90° PI/2ラジアン
60° PI/3ラジアン
45° PI/4ラジアン
30° PI/6ラジアン

円形と扇形の描画

canvas_circle.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
function draw(){
  var canvas = document.getElementById("canvas1");
  var ctx = canvas.getContext("2d");
  
  // 円を描画
  ctx.beginPath();
  ctx.arc(100,150, 100, 0, Math.PI * 2, false);
  ctx.fillStyle = "rgba(255,0,0,0.8)";
  ctx.fill();
  
  // 扇形1を描画
  ctx.beginPath();
  ctx.moveTo(150, 150);
  var startAngle = degToRad( 60 - 90);
  var endAngle   = degToRad(120 - 90);
  ctx.arc(150 ,150, 100, startAngle, endAngle, true);
  ctx.fillStyle = "rgba(0,255,0,0.8)";
  ctx.fill();
  
  // 扇形2を描画
  ctx.beginPath();
  ctx.moveTo(200, 150);
  var startAngle = degToRad( 60 - 90);
  var endAngle   = degToRad(120 - 90);
  ctx.arc(200 ,150, 100, startAngle, endAngle, false);
  ctx.fillStyle = "rgba(0,0,255,0.8)";
  ctx.fill();
  
  // 度からラジアンへ変換する関数
  function degToRad(degree) { return degree * Math.PI / 180; }
}
</script>
</head>

<body onLoad="draw()">
  <canvas id="canvas1" width="300" height="300" style="background-color:#fff;">
    図形を表示するには、canvasタグをサポートしたブラウザが必要です。
  </canvas>
</body>

</html>

demo