캔버스 기초

HTML5에 추가된 그림을 그릴 수 있게 해주는 태그

• 자바로 Graphic2D 였나? 그래프 그리는걸 한적이 있는데 문법이 상당히 비슷하면서 자바스크립트라 더 간결하다.
• 주말에 공부하기 귀찮을때 캔버스 가지고 놀 생각이다.
• 다음에 볼 강의 https://www.youtube.com/watch?v=JFQOgt5DMBY&list=PLe9WXHRkq9p2Yl0z2zskv-FhP5sinISTc

canvas 태그를 만들고 크기를 정해준다

• 각 기능을 실행할 버튼 태그 추가

  <canvas id="myCanvas" width="200" height="200" style="border: 1px solid black;"></canvas>
  <br/>
  <button onclick="drawRect()">네모 그리기</button>
  <button onclick="drawArc()">원 그리기</button>
  <button onclick="drawLine()">선 그리기</button>

도형 그리기

• 캔버스로 그림을 그리는 것은 context 객체를 가져오는것부터 시작된다.
• fillRect, clearRect, strokeRect으로 간단히 사각형을 만들 수 있다.

function drawRect() {
    var myCanvas = document.getElementById("myCanvas");
    // Canvas를 통해 그림을 그릴 때는 Context 객체를 먼저 얻어와야 한다.
    var ctx = myCanvas.getContext('2d');

    ctx.fillRect(25,25,100,100); // 배경 색이 있는 네모를 그린다
    ctx.clearRect(45, 45, 60, 60); // 투명한 네모를 그린다.
    ctx.strokeRect(50, 50, 50, 50); // 선으로만 그린다.
}

곡선 그리기

• 곡선 혹은 선을 그릴때는 beginPath()로 선그리기 시작을 선언하는 것부터 시작한다.
• arc()로 곡선을 그리고 난후 moveTo()로 좌표를 이동해서 또 그릴 수 있다.
• 곡선을 360도로 그리면 결국 원이 된다.(Math.PI_2=360도, 90도라면 Math.PI_2*0.5)

function drawArc() {
    var myCanvas = document.getElementById("myCanvas");
    var ctx = myCanvas.getContext('2d');
    ctx.beginPath(); // 선 그리기 시작

    // 중심점x, 중심점y, 반지름길이, 시작점 위치(0=3시방향), 종료위치, 방향(true=반시계방향)
    ctx.arc(75, 75, 50, 0, Math.PI*2, true);

    ctx.moveTo(110, 75); // 시작 점 위치를 이동
    ctx.arc(75, 75, 35, 0, Math.PI, false); // 입

    ctx.moveTo(65, 65); // 왼쪽 눈
    ctx.arc(60, 65, 5, 0, Math.PI*2, true);

    ctx.moveTo(95, 65); // 오른쪽 눈
    ctx.arc(90, 65, 5, 0, Math.PI*2, true);

    ctx.stroke();
    // ctx.fill();
}

선 그리기

• lineTo()로 선을 그린다.

• 그리지 않은 나머지 한 선은 closePath()로 쉽게 그릴수 있다.

  function drawLine() {
    var myCanvas = document.getElementById("myCanvas");
    var ctx = myCanvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(25, 25);    // 시작점 이동
    ctx.lineTo(105, 25);   // 가로선 긋기
    ctx.lineTo(25, 105);   // 대각선 긋기
    // ctx.lineTo(25, 25); // 세로선 긋기
    ctx.closePath();       // 남은선 긋기 : 남은 세로선이 자동으로 그어짐
    ctx.stroke();
  }