canvas 선그리기

IT/언어

canvas 선그리기

으어오오옹 2013. 11. 26. 16:50

<!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>