HTML5 Canvas 활용예제

HTML5 Canvas 활용하기

canvas는 즉석에서 이미지를 생성할 수 있는 프로그래밍 인터페이스가 딸린 HTML요소입니다.

게임 그래픽이나 그래프와 같은 비주얼한 이미지를 그리는데 사용되며, 사각형의 영역을 갖는 캔버스 내에서는 선, 이미지, 사각형, 원 등을 자유롭게 그릴수 있습니다.

canvas태그를 활용하여 간단한 도형부터 동적인 애니메이션, 그래픽요소, 게임등의 활용예제들을 살펴보겠습니다.

  1. 도형그리기 – 사각형                                                                                                                                                                                                                                                                                                                       

    See the Pen RBOoox by UILab (@ui-lab) on CodePen.light

    • fillStyle/strokeStyle : 캔버스에 그리기 할 때 사용할 채우기나 테두리의 스타일을 설정해야 합니다.
    • fillRect(x,y,width,height) : 내부가 채워진 사각형을 x,y 위치에 width, height 높이로 그립니다.
    • strokeRect(x,y,width,height): x,y 위치에 width, height 높이로 그립니다.
    • clearRect(x,y,width,height): 투명한 사각형을 만듭니다.
  2. 도형그리기 – 선                                                                                                                                                                                                                                                                                                                                 

    See the Pen QBPdvE by UILab (@ui-lab) on CodePen.light

    • beginPath()/ closePath() : 패스를 시작 할때 / 패스를 끝낼 때 사용합니다.
    • moveTo : 시작점을 x,y 점으로 이동합니다.
    • lineTo : 시작점위치에서 x점 y점 위치까지 선 그립니다.
  3. 도형그리기 -원                                                                                                                                                                                                                                                                                                                                   

    See the Pen yqrgOV by UILab (@ui-lab) on CodePen.light

    • arc(x, y, radius, startAngle, endAngle, anticlockwise); x,y 값은 원의 중심점을 의미, radius는 원의 반지름을 의미, startAngle과 endAngle은 일반 각도가 아닌 라디안입니다. – Math.PI * 2anticlockwise는 원호의 방향을 true나 false로 지정합니다. ( true: 반시계방향 / fasle : 시계방향)시작각도가 0이고, 끝 각도가 360이면 완전한 원을 그립니다.
  4. 문자(text)                                                                                                                                                                                                                                                                                                                                                           

    See the Pen pZBRqr by UILab (@ui-lab) on CodePen.light

    • fillText(text, x,y)-text : 캔버스에 그릴문자열- x : 캔버스에서 문자열의 x위치- y : 캔버스에서 문자열의 y위치
    • strokeText(text, x,y) – 테두리 윤곽선만 있는 글자
  5. 이미지(image)                                                                                                                                                                                                                                                                                                                                                     

    See the Pen ejoWPz by UILab (@ui-lab) on CodePen.light

    • drawImage(Image, dx, dy) 이미지객체, 캔버스에 이미지를 그리기 시작하는 왼쪽 상단 모서리의 x, y 좌표값 등 세개의 매개변수가 있습니다.
  6. 이미지(image)                                                                                                                                                                                                                                                                                                                                                 

    See the Pen xJNzxK by UILab (@ui-lab) on CodePen.light

    • drawImage(Image, dx, dy, dw, dh);이미지의 크기를 바꾸고 싶다면, 뒤부분 dw, dh를 바꾸어 추가하면 됩니다.
  7. 그라디언트  – 선형                                                                                                                                                                                                                                                                                                                                 

    See the Pen vaMmrj by UILab (@ui-lab) on CodePen.light

    • 선형 그라데이션
      : (x,y) 지점에서 (x1,y1) 까지 직선으로 색조가 변화합니다.
      createLinearGradient(x,y,x1,y1) 함수를 이용합니다.
    • addColorStop(offset,color)함수를 이용하여 각 지점에 이용될 색을 지정합니다.
    • offset는 0.0(시작점) 에서 1.0 (끝점) 사이의 위치 값을 나타내며 해당 위치의 색을 지정합니다
  8. 그라디언트  – 원형                                                                                                                                                                                                                                                                                                                                 

    See the Pen XBQMwr by UILab (@ui-lab) on CodePen.light

    • 원형 그리데이션
      : 중심이 (x,y), 반지름 r인 원에서 중심이 (x1,y1), 반지름이 r1 인 원 사이의 색조가 변화한다
      createRadialGradient(x,y,r,x1,y1,r1) 함수 이용
  9. 그림자효과                                                                                                                                                                                                                                                                                                                                 

    See the Pen BPERvb by UILab (@ui-lab) on CodePen.light

    • shadowOffsetX, shadowOffsetY 함수를 이용하여 원본 도형의 위치를 기준으로 그림자의 위치를 지정합니다.
    • shadowColor 로 그림자 색상 shadowBlur로 그림자의 흐리기를 조정할 수 있습니다.
  10. 그래픽요소

    See the Pen Abstract Canvas Visualization by Jack Rugile (@jackrugile) on CodePen.light

    See the Pen 30,000 Particles by Justin Windle (@soulwire) on CodePen.light

    See the Pen Dots Countdown by Allan Pope (@allanpope) on CodePen.light

    [ 출처 : https://s.codepen.io/bloodyrosa/debug/yJjyqJ ]

     

    See the Pen VBNWPV by UILab (@ui-lab) on CodePen.light

     

    See the Pen BPEZJN by UILab (@ui-lab) on CodePen.light

    [ 출처 : http://curran.github.io/HTML5Examples/canvas/bouncingBall/index.html / http://curran.github.io/HTML5Examples/canvas/mouseFollower/index.html ]

  11. 게임

canvas로 구현한 게임하러가기

 

canvas 태그를 활용한 다양한 예제들을 살펴보았습니다.

위에 예제들처럼, HTML5 canvas의 등장으로  더 이상 플러그인, 플랫폼, 개발 툴에 의존하지 않아도 됩니다.

HTML5의 새 기능, canvas는 웹을 도화지 삼아 2D와 3D 그림을 그리고 그래픽이 가미된 대화형 UI제작, 애니메이션도 제작할 수 있습니다.

 

Related Posts
Comment

댓글 남기기