본문 바로가기

Webstoryboy

Category

Explanation

HTML/Alphabet

<canvas>

<canvas> 태그는 비트맵 방식의 그림을 설정합니다. canvas API와 WebGL API를 통해 그래픽과 애니메이션을 만듭니다.


<canvas>

<canvas> 태그는 비트맵 방식의 그림을 설정합니다.

특징 설명
요소 블록 요소(Block Element)
닫는 태그 적용(<canvas> ~ </canvas>)
버전 HTML4
시각적 표현 기본적 버튼 디자인(브라우저마다 다름)
사용성 ★★★★☆

정의(Definition)

  • <canvas> 태그는 비트맵 방식의 그림을 설정합니다.
  • <canvas> 태그는 canvas API와 WebGL API를 통해 그래픽과 애니메이션을 만듭니다.
  • <canvas> 태그는 <img> 태그와 달리 닫는 태그를 사용해야 합니다.
  • <canvas> 태그는 자바스크립트를 사용하여 설정합니다.
  • <canvas> 태그의 크기는 CSS를 통해 설정할 수 있지만, 렌더링을 통해 이미지 크기가 변경되어 왜곡 될 수 있습니다.

비교(Compare)

  • <canvas> 태그는 비트맵 방식의 그림을 정의합니다.
  • <svg> 태그는 벡터 방식의 그림을 정의합니다.

예제1(Sample)

캔버스를 통해 사각형을 설정한 예제입니다.
HTML
CSS
SCRIPT
<canvas width="300" height="200"></canvas>
//CSS none
<script>
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#a2cbfa';
    ctx.fillRect(10, 10, 100, 100);
</script>

속성(Property)

속성 값(예) 설명 버전
height height="200" 요소의 세로 값을 설정합니다. -
width width="200" 요소의 가로 값을 설정합니다. -

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<canvas>
height
width

참고 사이트(Reference)


더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기

질문하기