色の指定

線と塗りつぶしが別になっています

javascriptの記述(head内)

あえて変数を変えています(ctx → g)。この変数は自分で決めるものなので一貫性があればなんでもかまいません。

// 実際の描画プログラム
function draw() {
  var canv = document.getElementById('area1');
  if ( ! canv || ! canv.getContext )  return false;
  var g = canv.getContext('2d');
  g.strokeRect(20, 10, 40, 30);
  g.fillRect(20, 50, 80, 60);
  g.clearRect(50, 70, 40, 10);
  //.....以下略...
}

色の指定

線の色はstrokeStyle,塗りつぶしはfillStyleで指定します。

色はスタイルシートの表現が使えます。文字列なので ' ' か," " で囲む必要があります。

"#ff9966" という書き方の他に "rgb(255, 153, 102)" という書き方もあります。各色0~255を十進法で書きます。ただし、このように書く場合も文字列でなければなりません。rgb(r, g, b)の様に色の強さを変数で表すことはできません。

  g.strokeStyle = '#ff0000';
  g.fillStyle   = '#009900';
  g.strokeRect(20, 10, 40, 30);
  g.fillRect(20, 50, 80, 60);
  g.clearRect(50, 70, 40, 10);

  g.strokeStyle = 'rgb(0,0,255)';
  g.fillStyle   = 'rgb(153,204,255)';
  g.strokeRect(120, 10, 40, 30);
  g.fillRect(120, 50, 80, 60);
  g.clearRect(150, 70, 40, 10);
aa

strokeやfillの時に

Pathの途中から色を変えることはできません。strokeやfillの時にstrokeStyleの値やfillStyleの値がどうなっているかということがでbiginPath()以降の色が決まります。

  g.strokeStyle = '#ff0000';
  g.beginPath();
  g.moveTo(20, 20);
  g.lineTo(120, 20);
  g.lineTo(120, 40);
  g.lineTo( 20, 40);
  g.lineTo( 20, 60);
  g.strokeStyle = '#00ff00';
  g.lineTo(120, 60);
  g.lineTo(120, 80);
  g.lineTo( 20, 80);
  g.lineTo( 20,100);
  g.strokeStyle = '#0000ff';
  g.moveTo(160, 20);
  g.lineTo(180,130);
  g.lineTo(280, 80);
  g.lineTo(160, 20);
  g.stroke();
aa

閉じられた線と囲まれた図形の塗りつぶし

strokeStyleを替えてからstroke()をするということを繰り返すことで、途中から色を変えることができます。

  g.beginPath();
  g.moveTo(20, 20);
  g.lineTo(120, 20);
  g.lineTo(120, 40);
  g.closePath();
  g.strokeStyle = '#ff0000';
  g.stroke();
  
  var dx = 140;
  g.beginPath();
  g.moveTo(20+dx, 20);
  g.lineTo(120+dx, 20);
  g.lineTo(120+dx, 40);
  g.closePath();
  g.strokeStyle = '#00ff00';
  g.stroke();
  
  var dy = 40;
  g.beginPath();
  g.moveTo(20+dx, 20+dy);
  g.lineTo(120+dx, 20+dy);
  g.lineTo(120+dx, 40+dy);
  g.closePath();
  g.strokeStyle = '#0000ff';
  g.stroke();
aa

stroke() の代わりに fill()を使えば線の内側を塗りつぶすことができます。fill()の時には閉じていない折れ線は閉じたものとして塗りつぶされます。

  dx = 280;
  g.beginPath();
  g.moveTo(20+dx, 20);
  g.lineTo(120+dx, 20);
  g.lineTo(120+dx, 40);
  g.closePath();
  g.fill();

円弧をfill()で塗りつぶす

円弧をfill()で塗りつぶす場合は弦で閉じてしまいます。扇型にするためには工夫が必要です。

arc(中心x, 中心y, 半径, 開始角, 終了角, 反時計回り);

  g.strokeStyle = 'rgb(0, 51, 0)';
  g.fillStyle   = 'rgb(153, 255, 102)'; 
  g.beginPath();
  g.arc(100, 50, 40, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
  g.stroke();
  g.fill();
  g.beginPath();
  g.fillStyle = 'rgb(255, 0, 0)';
  g.arc(200, 50, 40, 60 * Math.PI / 180, 120 * Math.PI / 180, true);
  g.fill();
  g.beginPath();
  g.fillStyle = 'rgb(0, 0, 255)';
  g.arc(300, 50, 40, 80 * Math.PI / 180, 180 * Math.PI / 180, true);
  g.fill();
  g.beginPath();
  g.fillStyle = 'rgb(255, 0, 0)';
  g.arc(350, 50, 40, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
  g.fill();
aa

透明度

rgba(r, g, b, alpha)を使うと透明度を表現できます。rgb(r, g, b)に不透明度を表すalphaを加えます。r,g,bは0~255ですが、alphaは0~1です。0が全くの透明で見えなくなります。1は全くの不透明で、alphaのないrgb()と同じになります。

透明は薄い色ではありません。既に色がある所に描いた時不透明度が1でない時は元の色が透けて見えるように描かれるということです。

  g.beginPath();
  g.fillStyle = 'rgba(0, 255, 0, 1)';
  g.arc(50, 50, 40, 0, Math.PI*2, true);
  g.fill();
  g.beginPath();
  g.fillStyle = 'rgba(0, 0, 255, 0.7)';
  g.arc(100, 50, 40, 80 * Math.PI / 180, 180 * Math.PI / 180, true);
  g.fill();
  g.beginPath();
  g.fillStyle = 'rgba(255, 0, 0, 0.7)';
  g.arc(150, 50, 40, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
  g.fill();
  g.beginPath();
  g.fillStyle = 'rgba(0, 0, 255, 0.2)';
  g.arc(300, 50, 40, 0 , Math.PI*2, true);
  g.fill();
  g.beginPath();
  g.fillStyle = 'rgba(255, 0, 0, 0.2)';
  g.arc(350, 50, 40, 0, Math.PI*2, true);
  g.fill();
aa

課題 ファイル名 canvas2.html

canvasのあるページの作成。色のついたもの。

index.htmlからは「canvas2」という名前のリンクから行けるようにすること。


ウェブページ(Dec.2010)
聖愛中学高等学校
http://www.seiai.ed.jp/
Feb.2009 初稿