基本図形

矩形と線の2種類

javascriptの記述(head内)

図を描く function draw(){ } 内の記述の解説をします。前のページで var ctx = を求めたあとの記述です。

// 実際の描画プログラム
function draw() {
  var canvas1 = document.getElementById('graph');
  var ctx = canvas1.getContext('2d');
  // □■
  ctx.strokeRect(20, 20, 200, 40);
  ctx.fillRect(20, 120, 200, 40);
  //.....以下略...
}

矩形(くけい 四角のこと)

四角形の左上の場所(x,y)と幅(w),高さ(h)を指定します。

ctx.strokeRect(x, y, w, h);

strokeRect()は四角形の輪郭を書きますが,fillRect() は四角形内を塗りつぶし,clearRect() は四角形内を消します。

ctx.strokeRect(20, 10, 40, 30);
ctx.fillRect(20, 50, 80, 60);
ctx.clearRect(50, 70, 40, 10);
aa

clearRectは白で塗りつぶしているように見えますが、違います。canvasはもともと透明です。clearRectは透明に戻します。

点(x, y)を次々と指定していくことで折れ線を書くことができます。

beginPath()は新しい点のセット(Path)を作ります。

moveTo(x0,y0)はPathに(x0, y0)を加えてそこまで移動します。

lineTo(x1,y1)はこれまでのPathの最後の点と(x1,y1)を線で結ぶことを記録し,Pathに(x1, y1)を加えます。途中でmoveTo(xn, yn)が出てきた時には(xn, yn)に線を引かずに移動することを記録し,Pathに(xn, yn)を加えます。

stroke()を実行するとこれまでのPathの記録に基づき折れ線を引きます。

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(120, 20);
ctx.lineTo(120, 40);
ctx.lineTo( 20, 40);
ctx.lineTo( 20, 60);
ctx.lineTo(120, 60);
ctx.lineTo(120, 80);
ctx.lineTo( 20, 80);
ctx.lineTo( 20,100);

ctx.moveTo(160, 20);
ctx.lineTo(180,130);
ctx.lineTo(280, 80);
ctx.lineTo(160, 20);
ctx.stroke();
aa

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

closePath()でbeginPath()後にはじめて指定された点(始点)と最後に指定した点(終点)を結ぶ線を引き,図形を閉じるようになります。

点の指定には変数や式を使うことができます。

beginPath()をすると新しい点の並び(Path)を開始します。

  ctx.beginPath();
  ctx.moveTo(20, 20);
  ctx.lineTo(120, 20);
  ctx.lineTo(120, 40);
  ctx.closePath();
  ctx.stroke();
  
  var dx = 140;
  ctx.beginPath();
  ctx.moveTo(20+dx, 20);
  ctx.lineTo(120+dx, 20);
  ctx.lineTo(120+dx, 40);
  ctx.closePath();
  ctx.stroke();
  
  dx = 280;
  ctx.beginPath();
  ctx.moveTo(20+dx, 20);
  ctx.lineTo(120+dx, 20);
  ctx.lineTo(120+dx, 40);
  ctx.closePath();
  ctx.fill();
  
  var dy = 40;
  ctx.beginPath();
  ctx.moveTo(20+dx, 20+dy);
  ctx.lineTo(120+dx, 20+dy);
  ctx.lineTo(120+dx, 40+dy);
  ctx.closePath();
  ctx.stroke();
aa

円と円弧(arc)

円や円弧を描くには次のように中心の位置と半径などを指定します。

ctx.arc(x位置, y位置, 半径, 開始角度, 終了角度, 反時計回りか)

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

stroke()で実際に線が描画されます。stroke()の代わりにfill()をすると塗りつぶした円になります。

その都度.beginPath()をしないと下の例のようにつながってしまいます。

最後のtrue,falseは描画の方向で円の場合はどちらでも違いがありません。

  ctx.beginPath();
  ctx.arc(60, 50, 40, 0, Math.PI*2, false); /*anticlockwise=false*/
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(150, 50, 30, 0, Math.PI*2, true); 
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(230, 50, 30, 0, Math.PI*2, true); 
  ctx.fill();

  ctx.beginPath();
  ctx.arc(60, 150, 40, 0, Math.PI*2, false);
  ctx.arc(150,150, 30, 0, Math.PI*2, true); 
  ctx.stroke();
aa

ラジアンを用いた角度指定です。角度は数学と同じく時計の3時が0ですが,数学と反対に時計回りに角度を指定していきます。

120度は120*Math.PI/180とします。0度から120度まで時計回りに線を引く場合と,120度から0度に反時計回りで線を引く場合は同じ円弧が描けます。

0度から120度に時計回りで線を引く場合は反対側になります。

  ctx.beginPath();
  ctx.arc(40, 40, 30, 0, 120*Math.PI/180, false);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(180, 40, 30, 120*Math.PI/180, 0, true);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(110, 40, 30, 0, 120*Math.PI/180, true);
  ctx.stroke();
aa

ラジアンのままでの使用の例です。

  ctx.beginPath();
  ctx.arc(40, 40, 30, 0, Math.PI/4, false);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(110, 40, 30, 0, Math.PI/2, false);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(180, 40, 30, 0, Math.PI*3/4, false);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(250, 40, 30, 0, Math.PI, false);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(320, 40, 30, 0, Math.PI*3/2, false);
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(400, 40, 30, 0, Math.PI*3/2, true);
  ctx.stroke();
aa

度で表す例です。

  ctx.beginPath();
  ctx.arc(40, 40, 30, 0, 45*Math.PI/180, false);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(110, 40, 30, 0, 90*Math.PI/180, false);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(180, 40, 30, 0, 135*Math.PI/180, false);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(260, 40, 30, 0, 180*Math.PI/180, false);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(340, 40, 30, 0, 270*Math.PI/180, false);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(400, 40, 30, 0, 270*Math.PI/180, true);
  ctx.stroke();
aa

fillを使って塗りつぶしができますが,扇形にならず,円弧と円弧の最初の点と最後の点を結ぶ線で囲まれた範囲となります。

  ctx.beginPath();
  ctx.arc(40, 40, 30, 0, 270/180*Math.PI, false);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(110, 40, 30, 0, 270/180*Math.PI, true);
  ctx.fill();
aa

課題 ファイル名 canvas1.html

canvasのあるページの作成

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


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