arc()メソッド

CanvasRenderingContext2D arc()メソッド

arc()とは?

 状態:-  閲覧数:740  投稿日:2015-12-26  更新日:2016-01-22  
CanvasRenderingContext2Dオベジェクトのメソッド
・パスに円弧を追加する


構文


void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
void ctx.arc(円弧中心のx座標値, 円弧中心のy座標値, 円弧の半径, 円弧の始まりの角度, 円弧の終わりの角度, 時計回り or 反時計回り);


引数


x
・円弧中心のx座標値

y
・円弧中心のy座標値

radius
・円弧の半径

startAngle
・円弧の始まりの角度
・x軸の正方向から時計回りに定められるラジアン角

endAngle
・円弧の終わりの角度
・x軸の正方向から時計回りに定められるラジアン角

anticlockwise Optional
・省略可能なBoolean
・trueは、円弧を反時計回りに始まりから終わりの角度に向けて描画
・デフォルトは時計回り


注意事項


startAngleとendAngleで指定する角度の単位はラジアン
・360°であれば Math.PI * 2

任意の度数をラジアンに変換する場合
・度数 * Math.PI / 180

15°
・15 * Math.PI / 180

CanvasRenderingContext2D.arc()

遭遇例 / 確認例

 閲覧数:272 投稿日:2015-12-29 更新日:2016-09-19 

遭遇例


    var COL = 8;
   var RECT_CANV = {
       x: 0,
       y: 0,
       w: 500,
       h: 500
   };

    var CELL_SIZE = RECT_CANV.w / COL | 0; //500÷8=62.5

        var canv_board2 = document.createElement("canvas");
       var ctx_board2 = canv_board2.getContext('2d');
       canv_board2.width = RECT_CANV.w; //500
       canv_board2.height = RECT_CANV.h; //500
       ctx_board2.clearRect(0, 0, RECT_CANV.w, RECT_CANV.h);
       ctx_board2.globalAlpha = 0.07; //透明度
       ctx_board2.fillStyle = COLOR_WHITE;
       ctx_board2.beginPath();
       ctx_board2.arc(CELL_SIZE * 1, -3 * CELL_SIZE, 7 * CELL_SIZE, 0, Math.PI * 2, false);
       ctx_board2.fill();
       ctx.drawImage(canv_board2, 0, 0, RECT_CANV.w, RECT_CANV.h);



確認例1


void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
void ctx.arc(円弧中心のx座標値, 円弧中心のy座標値, 円弧の半径, 円弧の始まりの角度, 円弧の終わりの角度, 時計回り or 反時計回り);
ctx2.arc(CELL_SIZE * 1, -3 * CELL_SIZE, 7 * CELL_SIZE, 0, Math.PI * 2, false);
x
・円弧の中心のx座標値

y
・円弧の中心のy座標値

radius
・円弧の半径

startAngle
・円弧の始まりの角度
・x軸の正方向から時計回りに定められるラジアン角

endAngle
・円弧の終わりの角度
・x軸の正方向から時計回りに定められるラジアン角

anticlockwise Optional
・省略可能なBoolean
・trueは、円弧を反時計回りに始まりから終わりの角度に向けて描画
・デフォルトは時計回り

Math.PI
・円周率
・約 3.14159
ctx2.arc(62.5 × 1, -3 × 62.5, 7 × 62.5, 0, Math.PI × 2, false);
ctx2.arc(62.5, -187.5, 437.5, 0, 6.28318, false);

<canvas id="canv" width="500px" height="500px"></canvas>

<script>
var ctx1 = document.getElementById("canv").getContext('2d');

var COL = 8;
var RECT_CANV = {
   x: 0,
   y: 0,
   w: 500,
   h: 500
};
var CELL_SIZE = RECT_CANV.w / COL | 0; //500÷8=62.5
var COLOR_WHITE = "#0000CD";
   
var canvas2 = document.createElement("canvas");
var ctx2 = canvas2.getContext('2d');

//canvas2 幅 高さ
canvas2.width = RECT_CANV.w; //500
canvas2.height = RECT_CANV.h; //500

ctx2.clearRect(0, 0, RECT_CANV.w, RECT_CANV.h);
ctx2.globalAlpha = 0.07; //透明度
ctx2.fillStyle = COLOR_WHITE;
ctx2.beginPath();
ctx2.arc(CELL_SIZE * 1, -3 * CELL_SIZE, 7 * CELL_SIZE, 0, Math.PI * 2, false);
ctx2.fill();
ctx1.drawImage(canvas2, 0, 0, RECT_CANV.w, RECT_CANV.h);

</script>



確認例0


drawImage() メソッド … 幅と高さを指定(トリミング)してイメージ描画
<canvas id="canv" width="500px" height="500px"></canvas>

<script>
var ctx1 = document.getElementById("canv").getContext('2d');
var canvas2 = document.createElement("canvas");
var ctx2 = canvas2.getContext('2d');

//canvas2 幅 高さ
canvas2.width = 500;
canvas2.height = 500;

ctx2.fillStyle = "#0000CD";
ctx2.beginPath();
ctx2.arc(62.5, -187.5, 437.5, 0, 6.28318, false);
ctx2.fill();
ctx1.drawImage(canvas2, 0, 0, 500, 500);
</script>



確認例00 fill


より単純化
<canvas id="canv" width="500px" height="500px"></canvas>

<script>
 var ctx1 = document.getElementById("canv").getContext('2d');
 ctx1.fillStyle = "#0000CD";
 ctx1.beginPath();
 ctx1.arc(62.5, -187.5, 437.5, 0, 6.28318, false);
 ctx1.fill();
</script>



確認例02 fill


x座標値,Y座標値
・canvas中心

円弧の半径
・canvas÷2

コード
<canvas id="canv" width="500px" height="500px"></canvas>

<script>
 var ctx1 = document.getElementById("canv").getContext('2d');
 ctx1.fillStyle = "#0000CD";
 ctx1.beginPath();
 ctx1.arc(250, 250, 250, 15 * Math.PI / 180 , 270 * Math.PI / 180 , false);
 ctx1.fill();
</script>



確認例03 stroke


x座標値,Y座標値
・canvas中心

円弧の半径
・canvas÷2

コード
<canvas id="canv" width="500px" height="500px"></canvas>

<script>
 var ctx1 = document.getElementById("canv").getContext('2d');
 ctx1.fillStyle = "#0000CD";
 ctx1.beginPath();
 ctx1.arc(250, 250, 250, 15 * Math.PI / 180 , 270 * Math.PI / 180 , false);
//  ctx1.fill();
 ctx1.stroke();
</script>



円周上の座標を取得終了後再開


Twitter検索結果。「arc()メソッド」に関する最新ツイート


コメント投稿(ログインが必要)