WEBAPI

WEBAPI

Editing
  • account_tree
  • bug_report

InterfaceCanvasRenderingContext2D

<canvas> 요소의 드로잉 표면에 2D 렌더링 컨텍스트를 제공한다. 도형, 텍스트, 이미지 및 기타 객체를 그리는데 사용된다.

하위 트리 탐색

  • Constructor

    생성자 함수는 지원하지 않으며 HTMLCanvasElement 인터페이스의 getContext() 메소드에 의해서 반환된다.
  • [[Prototype]]

    생성자(constructor)를 가진 객체(object) 또는 인터페이스(interface)가 인스턴스(instance)를 생성할 때 상속할 수 있는 프로퍼티(property)와 메소드(method)를 가지고 있는 원형 객체를 참조하는 생성자의 은닉된 속성이다. 만약에 상속받은 객체(object) 또는 인터페이스(interface)가 존재한다면 상속한 객체(object) 또는 인터페이스(interface)의 [[Prototype]] 프로퍼티(property)와 메소드(method)를 추가적으로 사용할 수 있다.
    • Methods

      • arc()

        현재 패스에 호를 그린다.
      • arcTo()

        현재 위치에서 주어진 제어점과 반지름을 사용하여 호를 추가한다.
      • beginPath()

        새로운 패스를 시작한다.
      • bezierCurveTo()

        현재 패스에서 3차 베지어 곡선을 추가한다.
      • clearRect()

        시작점(x, y) 및 크기(width, height)로 정의된 사각형 영역의 모든 픽셀들을 제거한다.
      • clip()

        현재 패스에서 클리핑 경로를 만든다.
      • closePath()

        열린 패스를 시점 지점과 연결하여 닫는다.
      • createImageData()

        지정된 치수를 갖는 새로운 ImageData 객체를 생성한다.
      • createLinearGradient()

        매개변수로 지정된 좌표에 지정된 선을 따라 선형 그라데이션을 만든다.
      • createPattern()

        지정된 이미지를 사용하여 패턴을 만든다.
      • createRadialGradient()

        매개 변수에 지정된 두 원의 좌표로 지정된 방사형 그라데이션을 만든다.
      • drawFocusIfNeeded()

        현재 요소에 포커스가 있다면 패스 주위에 포커스 표시를 한다.
      • drawImage()

        캔버스에 이미지를 그리는 다양한 방법을 제공한다.
      • ellipse()

        현재 패스에 타원을 추가한다.
      • fill()

        현재 패스로 생성된 면에 지정된 스타일로 채운다.
      • fillRect()

        width와 height에 따라 크기가 결정되는 x, y에 위치에 채워진 사각형을 그린다.
      • fillText()

        캔버스에 텍스트를 추가한다.
      • getContextAttributes()

        실제 컨텍스트 속성을 포함하는 객체를 반환한다.
      • getImageData()

        지정된 좌표와 폭과 높이를 갖는 사각형으로 표시된 캔버스 영역에 대한 기본 픽셀 데이터를 나타내는 ImageData 객체를 반환한다.
      • getLineDash()

        대시라인(dash line)의 패턴 배열을 반환한다.
      • getTransform()

        컨텍스트에 적용 중인 현재 변환 행렬을 검색한다.
      • isPointInPath()

        지정된 포인트가 현재 패스에 포함되어 있는지 여부를 확인한다.
      • isPointInStroke()

      • lineTo()

        현재 위치에서 매개 변수로 지정된 좌표로 직선으로 연결한다.
      • measureText()

        TextMetrics 객체를 반환한다.
      • moveTo()

        매개 변수로 지정된 좌표로 이동한다.
      • putImageData()

        지정된 ImageData 객체의 데이터를 비트맵에 그린다.
      • quadraticCurveTo()

        현재 패스에 2차 베지어 곡선을 추가한다.
      • rect()

        매개 변수로 지정된 위치와 가로, 세로 크기를 사용하여 사각형 패스를 만든다.
      • resetTransform()

        단위 행렬로 현재 변환을 재설정한다.
      • restore()

        save()로 저장된 상태 스택의 마지막 요소를 사용하여 복원한다.
      • rotate()

        변환 행렬에 회전을 추가한다.
      • save()

        현재 그리기 스타일 상태를 저장한다.
      • scale()

        가로, 세로 값을 지정하여 〈canvas〉 요소의 단위에 크기 조정 변환을 추가한다.
      • scrollPathIntoView()

        현재 패스 또는 주어진 패스를 뷰로 스크롤한다.
      • setLineDash()

        대시 라인을 주어진 패턴으로 설정한다.
      • setTransform()

        현재 변환을 단위 행렬로 재설정한 다음 동일한 인수로 transform() 메소드를 호출한다.
      • stroke()

        선을 지정된 스타일로 적용한다.
      • strokeRect()

        현재 획 스타일을 사용하여 x, y 값을 갖는 시작점에서 width, height 값을 갖는 사각형을 캔버스에 그린다.
      • strokeText()

        x, y로 주어진 위치에 텍스트를 그린다.
      • transform()

        현재 변환 행렬에 인수로 설정된 행렬을 곱한다.
      • translate()

        캔버스와 캔버스의 원점을 그리드에서 x, y로 이동하여 변환을 추가한다.
    • Properties

      • canvas

        연결된 HTMLCanvasElement 객체를 참조한다.
      • currentTransform

        현재 변환 행렬(DOMMatrix 객체)을 나타낸다.
      • direction

        텍스트의 방향을 설정한다.
      • fillStyle

        면에 적용할 색 또는 스타일을 지정한다.
      • filter

        캔버스에 CSS 또는 SVG 필터를 적용한다.
      • font

        글꼴 및 크기를 설정한다.
      • globalAlpha

        캔버스에 합성되기 전에 쉐입(shape)과 이미지에 적용되는 투명도 값을 나타낸다.
      • globalCompositeOperation

      • imageSmoothingEnabled

        크기가 조정된 이미지를 매끄럽게 처리하기 위해 활성 여부를 설정한다.
      • imageSmoothingQuality

        이미지의 매끄러운 품질을 설정한다.
      • lineCap

        선 끝의 유형을 설정하거나 조회한다.
      • lineDashOffset

        대시 라인에서 패턴을 시작할 위치를 지정한다.
      • lineJoin

        선이 꺽이는 경우 모서리의 모양을 설정하거나 조회한다.
      • lineWidth

        선의 굵기를 설정하거나 조회한다.
      • miterLimit

        연귀한계 비율을 나타낸다.
      • shadowBlur

        그림자에 흐림 효과를 위한 값을 지정한다.
      • shadowColor

        그림자의 색상을 지정한다.
      • shadowOffsetX

        그림자의 수평 위치를 나타낸다.
      • shadowOffsetY

        그림자의 수직 위치를 나타낸다.
      • strokeStyle

        선에 적용할 색 또는 스타일을 지정한다.
      • textAlign

        텍스트가 렌더링되는 좌표 기준으로 정렬을 설정한다.
      • textBaseline

        텍스트 기준선에 대한 정렬을 설정한다.

상속 계층 탐색

Object

  • Methods

    • hasOwnProperty()

      객체가 특정 프로퍼티를 가지고 있는지를 블린 값으로 반환한다.
    • isPrototypeOf()

      해당 객체가 다른 객체의 프로토타입 체인에 속한 객체인지를 체크한다. 이 메소드는 instanceof 연산자와 함께 특정 프로토타입으로부터 상속된 객체만 작동하게 하려는(예를 들어 특정 메소드나 속성이 객체에 있다는걸 보장하려는 때) 코드에서 특히 쓸모가 많다.
    • propertyIsEnumerable()

      매개 변수의 속성이 열거가능한지 여부를 체크한다.
    • toLocaleString()

      객체를 나타내는 문자열을 사용 지역의 방식으로 출력이 된다. 이 메소드는 상속받은 모든 객체가 사용할 수 없고 아래와 같은 상속된 객체에 사용이 된다. Array.prototype.toLocaleString() Number.prototype.toLocaleString() Date.prototype.toLocaleString()
    • toString()

      객체를 나타내는 문자열을 반환한다.
    • valueOf()

      객체의 Primitive(원시) 값을 반환한다.
  • Properties

    • constructor

      객체의 생성자 함수를 참조한다.
    • __proto__

      상속된 [[Prototype]] 참조하거나 설정가능하며 일반적으로 실제 코드상에서는 잘 사용되지 않는다. ECMAScript에서 사용되지 않는 비표준이지만 최신 웹브라우저에서는 비공식적으로 지원하고 있다. 따라서 곧 표준 속성으로 지원될 확률이 높다.

지원 웹브라우저