LHJ

I'm a FE developer.

1.1.2 캔버스 API

09 Sep 2020 » canvas

1.1.2 캔버스 API

canvas 요소에서는 대부분의 API를 지원하지 않는다.
사실 API에서는 두가지 속성과 세가지 메서드만 제공하고 있다.

속성

  • width
  • height

메서드

  • getContext()
    캔버스와 연관된 그래픽 콘텍스트를 반환한다.
    각 캔버스에는 하나의 콘텍스트가 있으며 각 콘텍스트는 하나의 캔버스와 관련되어 있다.
  • toDataURL(type, quality)
    img 요소의 src 속성에 할당할 수 있는 데이터 URL을 반환한다.
    첫번째 인수에는 image/jpegimage/png 등과 같이 이미지에 대한 타입을 명시한다.
    첫번째 인수를 명시하지 않으면 기본값인 image/png로 설정된다.
    두번째 인수는 JPEG 이미지의 품질수준으로 0.0부터 1.0까지의 실수값을 반드시 명시해야 한다.
  • toBlob(callback, type, args...)
    캔버스의 이미지를 포함하고 있는 파일을 나타내는 Blob를 생성한다.
    첫번째 인수는 브라우저에서 Blob에 대한 참조를 호출하는 함수를 명시하고,
    두번째 인수에는 image/png 등과 같은 이미지 타입을 명시한다.
    참고로 두번째 인수의 기본값은 image/png이다.
    마지막으로 세번째 인수는 0.0부터 1.0까지의 값으로 JPEG 이미지의 품질 수준을 나타낸다.
    그리고 이미지 특성을 제어하기 위해 다른 인수를 추가할 수 있다.