JavaScript入門 Canvasで2dの描画

こんにちは。レモンティーです。

今回はJavaScriptCanvasを使って2dの描画をします。

Canvasで様々な描画を行うには、
まずCanvas要素のcontextを取得します。

 var canvas = document.getElementById('canvas1');
 var con = canvas.getContext('2d');

これで色々な描画ができます。

//四角形
con.fillRect(x,y,w,h); 
  //塗りつぶし

con.strokeRect(x,y,w,h); 
  //輪郭

con.clearRect(x,y,w,h); 
  //範囲内を消去

//直線
con.beginPath();
con.moveTo(x,y);
con.lineTo(x,y);
con.stroke();
  //moveToで描画開始位置に移動し、lineToでそこから任意の場所へ直線をひく。
  //引いた直線はstrokeすると見れる。
  //lineToを繰り返すと多角形も書ける。
  //開始位置に戻るにはcon.closePath()を使う
  //これで閉じた図形はcon.fillで塗りつぶせる。

//円弧
con.arc(x,y,r,θ0,θ1,反時計まわりかどうか);
  //θ0,1は開始の角度と終了の角度。
  //単位はラジアンなのでMath.PI等を使い指定する。
  //数学と逆回りなので-1倍するといつも通り。


こんな感じです。
(記事1つのページだと表示されますが記事一覧からだとうまく動きません。)









コードはこんな感じです。
HTML

<canvas id="cv" width='400' height='400'></canvas><br>
<button type="button" onclick="test1()">塗りつぶし四角形</button>
<button type="button" onclick="test2()">輪郭のみ四角形</button>
<button type="button" onclick="test5()">直線たち</button>
<button type="button" onclick="test3()">円弧A</button>
<button type="button" onclick="test4()">円弧B</button>
<button type="button" onclick="test0()">消す</button>

JS

<script>
 var canvas = document.getElementById('cv');
 var con = canvas.getContext('2d');

function test0(){
  con.clearRect(0,0,400,400);
}

function test1(){
  con.fillRect(100,200,40,130);
}

function test2(){
  con.strokeRect(200,100,50,78);
}

function test3(){
  con.beginPath();
  con.arc(200,200,150,-Math.PI/6,-Math.PI*7/6,true);
  con.moveTo(200,200);
  con.closePath();
  con.stroke();
}

function test4(){
  con.beginPath();
  con.arc(300,200,100,0,Math.PI*2,true);
  con.moveTo(300,200);
  con.closePath;
  con.fill();
}

function test5(){
  con.beginPath();
  con.moveTo(100,100);
  con.lineTo(120,300);
  con.lineTo(280,300);
  con.lineTo(295,150);
  con.lineTo(305,140);
  con.lineTo(315,140);
  con.lineTo(315,275);
  con.lineTo(305,275);
  con.lineTo(285,250);
  con.lineTo(300,100);
  con.closePath();
  con.stroke();
}

</script>


なお、キャンバスの範囲がわかりやすいようにCSSで枠を付けていますが本来は枠はありません。


今回はこれでおしまいです。

www.sawalemontea.com