[소스]
script src='http://code.jquery.com/jquery-latest.js'></script>
<script>
$(document).ready(function() {
var ctx = $('#mycanvas')[0].getContext('2d');
//연필로 그리기 (별만들기)
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(110, 160);
ctx.lineTo(150, 70);
ctx.lineTo(180, 160);
// 시작 선을 서로 연결해 준다. closePath
ctx.closePath();
ctx.stroke();
ctx.beginPath();
// x좌표, y좌표, 반지름, 시작각도, 끝각도
ctx.arc(300, 200, 50, 0, Math.PI*0.8);
ctx.lineTo(300, 200);
ctx.closePath();
ctx.fillStyle = 'rgb(0, 0, 255)';
ctx.fill();
ctx.stroke();
ctx.beginPath();
// x좌표, y좌표, 반지름, 시작각도, 끝각도
ctx.arc(300, 200, 50, Math.PI*0.8, Math.PI*1.9);
ctx.lineTo(300, 200);
ctx.closePath();
ctx.fillStyle = 'rgb(200, 200, 200)';
ctx.fill();
ctx.stroke();
ctx.beginPath();
// x좌표, y좌표, 반지름, 시작각도, 끝각도 = (Math.PI * 2) 360
ctx.arc(300, 200, 50, Math.PI*1.9, Math.PI*2);
ctx.lineTo(300, 200);
ctx.closePath();
ctx.fillStyle = 'rgb(10, 255, 0)';
ctx.fill();
ctx.stroke();
});
</script>
</head>
<body>
<canvas id='mycanvas' width='400' height='460'></canvas>
</body>
[결과]
회색이 무소속 박원순 후보
파란색이 딴나라당 나후보
'IT 관련 > Html5' 카테고리의 다른 글
| 자주 사용하는 명령어 (0) | 2015.10.28 |
|---|---|
| JQuery Canvas를 이용한 무지개 만들기 (0) | 2011.11.03 |
| 웹사이트 소스 가져오기 (JSON, Ajax) (0) | 2011.10.28 |
| JSon을 이용한 플리커 이미지 가져오기 (0) | 2011.10.28 |
| JQTouch 활용2 (0) | 2011.10.15 |