HTML5のcanvasに線や塗りで図形を描画する

HTML5のcanvasには、図形を線や塗りで描画するためのメソッドが予め用意されています。これらのメソッドを利用することで、これまではFlashのようなプラグインに頼らなければ実現が難しかった図形によるグラフの描画などもHTMLだけで実現することができます。

塗りで矩形を描画する fillRect()

fillRect()は、canvasに塗りで矩形を描画します。引数は4つで、順番にX座標, Y座標, 幅, 高さとなります。下記の例では、translate()で基準点をcanvasの中央に移動してから、360×270の矩形を描画しています。塗りのスタイルを指定していないため、初期値である黒で矩形が描画されます。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.save();
  context.translate(canvas.width * 0.5, canvas.height * 0.5);
  context.fillRect(-180, -135, 360, 270);
  context.restore();
};

塗りのスタイルを指定する fillStyleプロパティ

fillStyleで塗りのスタイルを指定することができます。スタイルに色を指定する場合は、cssと同じようにrgb()やrgba()を文字列で指定します。下記の例では、fillStyleで半透明の赤を指定し、矩形を描画しています。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.save();
  context.translate(canvas.width * 0.5, canvas.height * 0.5);
  context.fillStyle = 'rgba(255, 0, 0, 0.5)';
  context.fillRect(-180, -135, 360, 270);
  context.restore();
};

描画領域を矩形で切り抜く clearRect()

clearRect()は、描画された領域を矩形で切り抜きます。引数は、順番にX座標, Y座標, 幅, 高さとなります。下記の例では、canvasの中央に360×270の矩形を半透明の赤で描画した後、240×180の矩形で切り抜いています。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.save();
  context.translate(canvas.width * 0.5, canvas.height * 0.5);
  context.fillStyle = 'rgba(255, 0, 0, 0.5)';
  context.fillRect(-180, -135, 360, 270);
  context.clearRect(-120, -90, 240, 180);
  context.restore();
};

線で矩形を描画する strokeRect()

strokeRect()は、canvasに線で矩形を描画します。引数は、X座標, Y座標, 幅, 高さの順で指定します。下記の例では、canvasの中央に360×270の矩形を描画していますが、線幅や色などのスタイルを指定していないため、初期値で描画されます。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.save();
  context.translate(canvas.width * 0.5, canvas.height * 0.5);
  context.strokeRect(-180, -135, 360, 270);
  context.restore();
};

線のスタイルを指定するプロパティ

プロパティを通して線のスタイルを指定することができます。strokeStyleで線の色、lineWidthで線の幅、lineJoinで線の連結部分の結合方法を指定することができます。lineJoinで指定できる値は、"bevel", "round", "miter"となります。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.save();
  context.translate(canvas.width * 0.5, canvas.height * 0.5);
  // 線の色
  context.strokeStyle = 'rgba(255, 0, 0, 0.5)';
  // 線の幅
  context.lineWidth = 10;
  // 線の結合部
  context.lineJoin = 'round';
  context.strokeRect(-180, -135, 360, 270);
  context.restore();
};

パスを線で描くstroke(), パスを塗りつぶすfill()

パスを描くには、まずbeginPath()をコールします。次にmoveTo()でパスの開始点に移動し、lineTo()で指定した座標へ直線を描きます。パスを閉じるには、closePath()をコールします。線のスタイルとして、lineJoinに"miter"を指定した場合、miterLimitでマイター結合のリミットを指定することができます。

描いたパスを塗りつぶすにはfill()をコールし、線を描くにはstroke()をコールします。fill()とstroke()は、呼び出す順番によって結果が異なります。stroke()を先にコールした場合、線の内側半分もfill()によって塗りつぶされます。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.save();
  context.translate(canvas.width * 0.5, canvas.height * 0.5);
  // パスを描画
  context.beginPath();
  context.moveTo(0, -120);
  context.lineTo(120, 120);
  context.lineTo(-120, 120);
  context.closePath();
  // 塗りつぶしの色
  context.fillStyle = '#CCCCCC';
  // 線の色
  context.strokeStyle = 'rgba(255, 0, 0, 0.5)';
  // 線の幅
  context.lineWidth = 10;
  // 線の結合部
  context.lineJoin = 'miter';
  // マイター結合のリミット
  context.miterLimit = 1;
  // パスを塗りつぶす
  context.fill();
  // パスを線で描画
  context.stroke();
  context.restore();
};