遭遇例 ／ 確認例

遭遇例

    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

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

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

radius
・円弧の半径

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

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

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

Math.PI
・円周率
・約 3.14159

<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>

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