1. HTML5에서의 그래픽
2. HTML5에서의 멀티미디어

1. HTML5에서의 그래픽

HTML5는 그래픽 처리를 위한 다양한 기능을 제공합니다. 가장 주목할 만한 기능 중 하나는 Canvas입니다. Canvas를 사용하면 JavaScript를 통해 그림을 그리고 애니메이션을 만들 수 있습니다.

아래는 Canvas를 사용하여 간단한 사각형을 그리는 예제 코드입니다.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 150, 80);
</script>

SVG(Scalable Vector Graphics)도 HTML5에서 지원하는 그래픽 형식 중 하나로, XML 형태로 그래픽을 정의할 수 있습니다.

2. HTML5에서의 멀티미디어

HTML5는 비디오와 오디오를 위한 태그를 제공하여 멀티미디어 콘텐츠를 쉽게 표시할 수 있습니다.

아래는 비디오를 표시하는 예제 코드입니다.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

멀티미디어 요소를 조작하거나 이벤트를 처리할 수 있는 JavaScript API도 제공됩니다.

이를 참조한 Mozilla HTML5 공식 문서를 읽어보시기를 추천합니다.