[HTML5] Canvasに図形を描く - 直線・曲線

Canavsに線を描画します。 ここでは純粋な直線と、曲線として円弧、ベジュ曲線を取り上げます。

『線』を描画する

直線

直線は非常にシンプルです。ctx.moveTo()で始点に移動し、ctx.lineTo()で指定した座標まで線を描画します。

実行例

ctx.moveTo(x, y)
x, y
パスを描く際の座標を、指定した座標x,yに移動します。
ctx.lineTo(x, y)
x, y
終点を指定します。

ソース

<canvas id="board" width="300" height="150"></canvas>

<script>
window.onload = ()=>{
  const board = document.querySelector("#board");
  const ctx = board.getContext("2d");

  ctx.beginPath();
  ctx.moveTo(25, 25);          // 始点に移動
  ctx.lineTo(150, 100);        // 終点
  ctx.strokeStyle = "Orange";  // 線の色
  ctx.lineWidth = 5;           // 線の太さ
  ctx.stroke();
}
</script>

円弧

ctx.arc()は円を描く際に利用しますが、完全な円ではなく曲線を描く際にも利用できます。円の描き方やctx.arc()の引数についての詳細は過去の記事を参照してください。

実行例

ソース

<canvas id="board" width="300" height="250"></canvas>

<script>
window.onload = ()=>{
  const board = document.querySelector("#board");
  const ctx = board.getContext("2d");

  let x = 120;   // 円の中心点X
  let y = 120;   // 円の中心点Y
  let r = 100;   // 円の半径 
  let startAngle = ( 60 * Math.PI) / 180;  // 描画を開始する角度(ラジアン)
  let endAngle   = (240 * Math.PI) / 180;  // 描画を終了する角度(ラジアン)

  ctx.beginPath();
  ctx.arc(x, y, r, startAngle, endAngle, false);
  ctx.strokeStyle = "Orange";  // 線の色
  ctx.lineWidth = 5;           // 線の太さ
  ctx.stroke();
}
</script>

ベジュ曲線

もっと柔軟に曲線を描きたい場合はベジュ曲線を利用します。AdobeのIllustratorなどを触ったことがある方にお馴染みのアイツです。JavaScriptに実装されているのは2次ベジュ曲線と3次ベジュ曲線の2つがあります。

2次ベジュ曲線は以下のように3つの点の座標を元に曲線を描画します。非常に雑な説明になりますが、制御点の場所が始点・終点から離れるほどカーブも急なものになっていきます。

3次ベジュ曲線は制御点が2つに増えたことにより、2次よりも複雑な曲線を描くことができます。

2次ベジュ曲線

実行例

2次ベジュ曲線はctx.quadraticCurveTo()で描くことができます。始点までctx.moveTo()で移動し制御点と終点を指定します。

ctx.quadraticCurveTo(cpx, cpy, x, y)

cpx, cpy
制御点の座標を指定
x, y
終点の座標を指定

ソース

<canvas id="board" width="300" height="250"></canvas>

<script>
window.onload = ()=>{
  const board = document.querySelector("#board");
  const ctx = board.getContext("2d");

  // 座標を定義
  let start = { x: 50,    y: 20  };  //始点
  let cp  =   { x: 230,   y: 100 };  //制御点
  let end =   { x:  50,   y: 200 };  //終点

  ctx.beginPath();
  ctx.moveTo(start.x, start.y);  // 始点まで移動
  ctx.quadraticCurveTo(cp.x, cp.y, end.x, end.y);   // 2次ベジュ曲線を描画
  ctx.strokeStyle = "Orange";   // 線の色
  ctx.lineWidth = 5;            // 線の太さ
  ctx.stroke();
}
</script>

3次ベジュ曲線

実行例

3次ベジュ曲線はctx.bezierCurveTo()で描くことができます。2次ベジュ曲線と同様に始点までctx.moveTo()で移動し制御点2つと終点を指定します。

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

cp1x, cp1y
制御点1の座標を指定
cp2x, cp2y
制御点2の座標を指定
x, y
終点の座標を指定

ソース

<canvas id="board" width="300" height="250"></canvas>

<script>
window.onload = ()=>{
  const board = document.querySelector("#board");
  const ctx = board.getContext("2d");

  // 座標を定義
  let start = { x: 50,    y: 20  };  //始点
  let cp1 =   { x: 230,   y: 30  };  //制御点1
  let cp2 =   { x: 150,   y: 80  };  //制御点2
  let end =   { x: 250,   y: 220 };  //終点

  ctx.beginPath();
  ctx.moveTo(start.x, start.y);  // 始点まで移動
  ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);  // 3次ベジュ曲線を描画
  ctx.strokeStyle = "Cyan";      // 線の色
  ctx.lineWidth = 5;             // 線の太さ
  ctx.stroke();
}
</script>

参考ページ