JavaScriptでHTML5のcanvasを使って図形を描画

HTML5ではcanvasで図形を描くことが出来るので試してみます。

扇形

四角形

ソース

window.onload = function() {
    var c = document.getElementById("cv").getContext("2d");

    c.beginPath();
    c.arc(120, 120, 120, -Math.PI/2, -Math.PI, true);
    c.lineTo(120,120);
    c.closePath();
    c.fillStyle="#000000";
    c.fill();

    c.beginPath();
    c.arc(120, 120, 100, -Math.PI/2, -Math.PI, true);
    c.lineTo(120,120);
    c.closePath();
    c.fillStyle="#FFFFFF";
    c.fill();

    c.beginPath();
    c.arc(120, 120, 80, -Math.PI/2, -Math.PI, true);
    c.lineTo(120,120);
    c.closePath();
    c.fillStyle="#000000";
    c.fill();

    c.beginPath();
    c.arc(120, 120, 60, -Math.PI/2, -Math.PI, true);
    c.lineTo(120,120);
    c.closePath();
    c.fillStyle="#FFFFFF";
    c.fill();

    c.beginPath();
    c.arc(120, 120, 40, -Math.PI/2, -Math.PI, true);
    c.lineTo(120,120);
    c.closePath();
    c.fillStyle="#000000";
    c.fill();

    var c2 = document.getElementById("cv2").getContext("2d");
    c2.fillStyle="#000000";
    c2.fillRect(10, 90, 20, 20);
    c2.fillRect(40, 70, 20, 40);
    c2.fillRect(70, 50, 20, 60);
    c2.fillRect(100, 30, 20, 80);
}

感想

２個サンプルを作った段階で息切れがしました。絵心も含め自由自在に図形を描けるといい難いです。