[javascript]canvasで円や角丸の矩形を描画する

円や角丸の矩形の描画

canvasで円や、角丸の矩形を描く。
関数が用意されていないので自作します。

ソースコード

function draw(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var pi = Math.PI;
    // 塗りつぶし円を描く
    var fillCircle = function (x, y, r) {
        ctx.beginPath();
        ctx.arc(x, y, r, 0, pi * 2.0, true);
        ctx.fill();
    };

    // 塗りつぶし角丸の矩形を描く
    var fillRoundRect = function (l, t, w, h, r) {
        ctx.beginPath();
        ctx.arc(l + r, t + r, r, - pi, - 0.5 * pi, false);
        ctx.arc(l + w - r, t + r, r, - 0.5 * pi, 0, false);
        ctx.arc(l + w - r, t + h - r, r, 0, 0.5 * pi, false);
        ctx.arc(l + r, t + h - r, r, 0.5 * pi, pi, false);
        ctx.closePath();
        ctx.fill();
    }

    var colorList = ["#0080be", "#00b09b", "#a6ff2d", "#ffbe23", "#f70013", "#8200b2"];
    var count = colorList.length;
    for (var i = 0; i < count; i++) {
        ctx.fillStyle = colorList[i];
        var v = i * 40  / count;
        fillCircle(50, 50, 40 - v);
        fillRoundRect(100 + v, 10 + v, 120 - v * 2, 80 - v * 2, (40 - v)  / 2);
    }
}

実行結果

サンプルコードの実行結果はこのとおり。

※
fill()をstroke()にすれば、塗りつぶしではなく線を描くことができます。