[HTML] HTML5 이용하기 03 - Canvas 이용하기 (170417)

HTML5 이용하기 - Canvas 이용하기

• Canvas 이용하기

- 이용방법

•  캔버스의 참조값 얻어오기
  var canvas = document.querySelector("#myCanvas");

• 렌더링 할 context 객체의 참조값 얻어오기
  var context = canvas.getContext("2d"); 

• 외곽선 색상
  context.strokeStyle

• 선의 굵기
  context.lineWidth, context.lineCap, context.lineJoin

• 경로 시작
  context.beginPath();

• 시작점으로 이동
  context.moveTo(100,200);

• 이을점 지정
  context.lineTo(500,0);

• 그리기
  context.stroke();

• 경로 마무리
  context.closePath();

• 채우는 색 지정
  context.fillStyle

• 사각형 만들기
  context.fillRect(x, y, width, height)

• stroke(외곽) 색상 바꾸기
  context.strokeStyle

• 원 만들기
  context.arc(x, y, r, startAngle, endAngle, 반시계반향 여부)
  cf > x, y, r 값은 radian 값이 들어가야 한다.
        radian값 구하는 법 : Math.PI / 180 * X도
  
  
• context 에 알파값 부여하기 (투명도)
  context.globalAlpha= 0.2;
  
  
• 글자 출력하기
  context.font = "40px sans-serif";
  context.fillStyle = "black";
  context.fillText(출력할 문자, 좌하단 x, 좌하단 y)
  
  

• 직선 및 사각형 그리기
  

** 출력 결과 **

• 원 그리기

** 출력 결과 **

• 이미지 로딩하기
  

• 이미지 로딩하기
  var rabbitImg = new Image();
  rabbitImg.src = "images/rabbit_1.png";

• 이미지 로딩 후 실행할 함수
  rabbitImg.onload = function(){};
  
  
• 이미지 나타내기
  .drawImage(이미지, x, y, width, height);

** 출력 결과 **