[html] HTML5 캔버스

22 Dec 2023

html

HTML5 캔버스를 사용하여 그래픽을 생성하려면 다음과 같은 단계를 따릅니다:

HTML 문서 안에 <canvas> 요소를 추가합니다.
JavaScript를 사용하여 캔버스 컨텍스트를 가져옵니다.
캔버스 컨텍스트를 사용하여 도형을 그리거나 이미지를 그립니다.

아래는 HTML5 캔버스를 사용하여 원을 그리는 간단한 예제 코드입니다:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(100, 50, 40, 0, 2 * Math.PI, false);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'black';
context.stroke();
</script>

</body>
</html>

위의 예제 코드는 200x100 크기의 캔버스에 빨간색 원을 그리는 간단한 예제입니다.

더 많은 HTML5 캔버스 사용 예제 및 자세한 내용은 MDN 웹 문서를 참조하시기 바랍니다: HTML5 Canvas - MDN Web Docs