Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

moozi

파이차트그리기 본문

TIS_2016/HTML5_1기

파이차트그리기

moozi 2016. 3. 22. 15:39

<!DOCTYPE html>
<html>
<head>
   
    <meta charset="utf-8">
</head>   
<body>

<p>파이차트 그리기</p>

<canvas id="myCanvas" width="500" height="500"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
 
  ctx.fillStyle = "#ff0000";
  ctx.beginPath();
  ctx.moveTo(200, 200);
  ctx.arc(200, 200, 100, 0, Math.PI * 0.5);
  ctx.lineTo(200,200);
  ctx.fill();
   
  ctx.fillStyle = "#00ff00";  
  ctx.beginPath();
  ctx.moveTo(200, 200);
  ctx.arc(200, 200, 100, Math.PI * 0.5, Math.PI * 0.75);
  ctx.lineTo(200,200);
  ctx.fill();
   
  ctx.fillStyle = "#0000ff";  
  ctx.beginPath();
  ctx.moveTo(200, 200);
  ctx.arc(200, 200, 100, Math.PI * 0.75, Math.PI * 1.5);
  ctx.lineTo(200,200);
  ctx.fill();    

  ctx.fillStyle = "orange";  
  ctx.beginPath();
  ctx.moveTo(200, 200);
  ctx.arc(200, 200, 100, Math.PI * 1.5, Math.PI * 2);
  ctx.lineTo(200,200);
  ctx.fill();    

</script>

</body>
</html>

'TIS_2016 > HTML5_1기' 카테고리의 다른 글

gallery프로그램 예제  (0) 2016.03.24
AngularJS Custom Filter 예제  (0) 2016.03.23
3/22 javascript canvas예제  (0) 2016.03.22
javascript 연습문제3  (0) 2016.03.21
3/21 오전 jquery 연습 코드  (0) 2016.03.21
'TIS_2016/HTML5_1기' Related Articles more
Comments