WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

canvas 円を描く

こちらを参考にしました。
developer.mozilla.org

デモ
http://efu.sakura.ne.jp/web/canvas/index3.html

円の描画でスマイリーフェイスを作成

円、円弧を描く

arc(x, y, radius, startAngle, endAngle, anticlockwise)

x、 yで指定した位置を中心、r を半径、startAngle を開始位置、endAngle を終端、anticlockwise を方向 (デフォルトは時計回り) とする円弧を描きます。

x、yで指定した位置にペンを移動

moveTo(x, y)

f:id:mmmmofu:20180419121849p:plain

<canvas id="canvas04" width="300" height="300">
  <!-- 代替コンテンツ -->
  canvasが有効なブラウザを使用してください。
</canvas>
<canvas id="canvas05" width="300" height="300">
  <!-- 代替コンテンツ -->
  canvasが有効なブラウザを使用してください。
</canvas>
/*++ 円の描画でスマイリーフェイスを作成 +++++++++++++++++++++++*/

var canvas3 = document.getElementById('canvas04');
var ctx3 = canvas3.getContext('2d');

var canvas4 = document.getElementById('canvas05');
var ctx4 = canvas4.getContext('2d');

//新しいパスを作成
ctx3.beginPath();
ctx4.beginPath();

//円・円弧を描く
//Math.PIは円周率、約3.14159を表す

//moveTo()を使用しない場合
ctx3.arc(75,75,50,0,Math.PI*2,true);//円弧を描く・外の円
ctx3.arc(75,75,35,0,Math.PI,false);//円弧を描く・口(時計回り)
ctx3.arc(60,65,5,0,Math.PI*2,true);//円弧を描く・左目
ctx3.arc(90,65,5,0,Math.PI*2,true);//円弧を描く・右目

//moveTo()を使用した場合
ctx4.arc(75,75,50,0,Math.PI*2,true);//円弧を描く・外の円
ctx4.moveTo(110,75);//指定した位置にペンを移動する
ctx4.arc(75,75,35,0,Math.PI,false);//円弧を描く・口(時計回り)
ctx4.moveTo(65,65);//指定した位置にペンを移動する
ctx4.arc(60,65,5,0,Math.PI*2,true);//円弧を描く・左目
ctx4.moveTo(95,65);//指定した位置にペンを移動する
ctx4.arc(90,65,5,0,Math.PI*2,true);//円弧を描く・右目

//輪郭をなぞる方式で図形を描く
ctx3.stroke();
ctx4.stroke();

for文を使用し複数の円または円弧を作成

f:id:mmmmofu:20180419121911p:plain

<canvas id="canvas06" width="300" height="300">
    <!-- 代替コンテンツ -->
    canvasが有効なブラウザを使用してください。
</canvas>
/*++ for文を使用し複数の円または円弧を作成 +++++++++++++++++++++++*/

var canvas5 = document.getElementById('canvas06');
var ctx5 = canvas5.getContext('2d');

for(var i=0; i<4; i++) {
  for(var j=0; j<3; j++) {
    ctx5.beginPath();//新しいパスを作成
    var x = 25+j*50;//xの座標
    var y = 25+i*50;//yの座標
    var radius = 20;//円の半径
    var startAngle = 0;//円の始点
    var endAngle = Math.PI+(Math.PI*j)/2;
    var anticlockwise = i%2==0 ?false : true; // 時計回りまたは反時計回り
    ctx5.arc(x, y, radius, startAngle, endAngle, anticlockwise);
    if (i>1){
      ctx5.fill();//塗りつぶす
    } else {
      ctx5.stroke();//輪郭をなぞる方式で図形を描く
    }
  }
}