canvasAPI

» JavaScript

canvas

css는 물론 js에서까지 사이즈를 정해줘야 정상적으로 선이 그려짐

HTMLCanvasElement.getContext()

canvas의 드로잉 context를 반환하는 메소드 드로잉에 필요한 속성과 함수를 가진 객체를 생성함 context 식별자가 지원되지 않을 경우 null을 반환함

context의 뜻은 맥락, 문맥임!

  • 파라미터(매개변수)
    • 2d
    • webgl (3d를 구현)
  • 속성
    1. fill (채우기)
      • fill
         ctx.fill
        

        내부가 채워진 도형을 그리는 메서드

      • fillRect
         ctx.fillRect(x, y, width, height)
        

        색칠된 사각형을 그림 x, y는 시작좌표를 width와 height는 사각형의 크기를 지정함

      • fillStyle
         ctx.fillStyle = '#fff'
        

        도형을 채울 색상을 정하는 메소드

    2. stroke
      • stroke
         ctx.stroke
        

        윤곽선을 이용하여 도형을 그리는 메소드

      • strokeRect
         ctx.strokeRect(x,y,width,height)
        

        윤곽선만 그림 x, y는 시작좌표를 width와 height는 사각형의 크기를 지정함

      • strokeStyle
         ctx.strokeStyle = #fff;
        

        도형의 외곽선 색상을 지정하는 메소드

      • clearRect
         ctx.clearRect(x,y,width,height)
        

        지정된 사각형 영역을 지우고 완전히 투명하게 만드는 메소드 x, y는 시작좌표를 width와 height는 지우고 싶은 영역의 크기를 지정함

    3. path
      • beginPath
         ctx.beginPath()
        

        새로운 경로를 만드는 메소드

      • closePath
         ctx.closePath()
        

        현재 하위 경로의 시작 부분과 연결된 직선을 추가하는 메소드

    4. 기타
      • moveTo
         ctx.moveTo(x, y)
        

        펜을 지정된 좌표로 옮기는 메소드

      • lineTo
         ctx.lineTo(x, y)
        

        현재 드로잉 위치에서 지정된 위치까지 선을 그리는 메소드 시작점은 이전에 그려진 경로에 의해 결정되며, moveTo 메소드를 통해 시작점 변경이 가능

참조 Jaeeun_새싹개발자

.lineWidth 선의 두께를 설정함

ctx.lineWidth = value;