반응형

 

 

 

arc(x, y, radius, startAngle, endAngle, anticlockwise)

x,y

원의 중심점

radius

원의 반지름

startAngle

원을 그릴 선의 시작 점 (기준 0도 는 3시)

endAngle

선의 끝

anticlockwise

선의 방향 (false = 시계방향, true = 반시계 방향

 

 

<!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8" />
  <title> 원 그리기 </title>
  <script type="text/javascript">
  function arc()
  {
   var canvas = document.getElementById('canvas');
   context = canvas.getContext('2d');

   context.beginPath();

 


   context.arc(120,120,100,0,360*Math.PI/180,false);
   context.stroke();

 

 

 

   context.beginPath();
   context.arc(350,120,100,90*Math.PI/180,360*Math.PI/180,false);
   context.stroke();

   context.beginPath();
   context.arc(350,120,100,90*Math.PI/180,360*Math.PI/180,true);
   context.fill();

  

 

 

   context.beginPath();
   context.arc(570,120,100,90*Math.PI/180,360*Math.PI/180,false);
   context.closePath();
   context.stroke();

   context.beginPath();
   context.moveTo(570,120);
   context.arc(570,120,100,90*Math.PI/180,360*Math.PI/180,true);
   context.closePath();
   context.fill();

 

 

 

 

  context.beginPath();
   context.arc(350,350,100,90*Math.PI/180,360*Math.PI/180,true);
   context.fill();

 

 

  context.beginPath();
   context.moveTo(570,350);
   context.arc(570,350,100,90*Math.PI/180,360*Math.PI/180,true);
   context.closePath();
   context.fill();


  }
  </script>
 </head>

 <body onload="arc();">
  <canvas id="canvas" width="700" height="500"
   style="border:solid 1px #000000">
  canvas 사용하기
  </canvas>
 </body>
 </html>


반응형

'IT > 언어' 카테고리의 다른 글

DAO는 1:1 이어야 하나 토론!  (0) 2013.11.26
HTML 5 신규 element 정리  (0) 2013.11.26
canvas 다각형 그리기  (0) 2013.11.26
canvas 선그리기  (0) 2013.11.26
canvas 사용하기  (0) 2013.11.26
반응형

 <!DOCTYPE html>
 <html>


 <head>
  <meta charset="utf-8" />
  <title> 다각형 그리기 </title>


  <script type="text/javascript">
  function polygon()
  {
  var canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');

 

  context.beginPath();
  context.moveTo(150,10);

 

  context.lineTo(80,350);
  context.lineTo(350,350);
  context.lineTo(280,10);

 

  context.closePath();
  context.stroke();

 

  context.beginPath();
  context.moveTo(500,10);

 

  context.lineTo(350,150);
  context.lineTo(430,350);
  context.lineTo(570,350);
  context.lineTo(650,150);

 

  context.closePath();
  context.fill();
  }
  </script>


 </head>


 <body onload="polygon();">


  <canvas id="canvas" width="700" height="400"
   style="border:solid 1px #000000">
  </canvas>


 </body>
 </html>



반응형

'IT > 언어' 카테고리의 다른 글

HTML 5 신규 element 정리  (0) 2013.11.26
canvas 원호 그리기  (0) 2013.11.26
canvas 선그리기  (0) 2013.11.26
canvas 사용하기  (0) 2013.11.26
Jquery 유용한 사이트 모음  (0) 2013.11.26
반응형


 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8" />
  <title> 선 그리기 </title>
  <script type="text/javascript">
  function line()
  {
  var canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');

 

  context.moveTo(10,10);
 //moveTo(x,y); 시작점 지정
  context.lineTo(200,300);
 //lineTo(x,y); 시작위치(바로 앞 moveTo)에서 지정한 위치까지 선을 그림
  context.stroke();
 // stroke(); 선 출력

 

  context.moveTo(100,10);
  context.lineTo(300,300);
  context.lineTo(300,100);
  context.stroke();

 

  context.moveTo(300,10);
  context.lineTo(500,300);
  context.lineTo(500,100);


  context.moveTo(550,10);
  context.lineTo(550,300);
  context.stroke();
  }
  </script>
 </head>
 <body onload="line();">
  <canvas id="canvas" width="700" height="400"
   style="border:solid 1px #000000">
  
  </canvas>
 </body>
 </html>



반응형

'IT > 언어' 카테고리의 다른 글

HTML 5 신규 element 정리  (0) 2013.11.26
canvas 원호 그리기  (0) 2013.11.26
canvas 다각형 그리기  (0) 2013.11.26
canvas 사용하기  (0) 2013.11.26
Jquery 유용한 사이트 모음  (0) 2013.11.26

+ Recent posts

티스토리툴바