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);
}
感想
2個サンプルを作った段階で息切れがしました。絵心も含め自由自在に図形を描けるといい難いです。
コメント