HTML <canvas> 요소는 웹 페이지에 그래픽을 그리는 데 사용된다.
아래 그림은 그래픽은 <캔버스>로 작성되었습니다. 빨간색 사각형, 그라데이션 사각형, 다색 사각형 및 다색 텍스트의 4가지 요소를 보여준다.
HTML 캔버스란 무엇인가?
HTML <canvas> 요소는 JavaScript를 통해 그래픽을 즉시 그리는 데 사용된다.
<canvas> 요소는 그래픽을 위한 컨테이너일 뿐이다.
실제로 그래픽을 그리려면 JavaScript를 사용해야 한다.
캔버스에는 경로, 상자, 원, 텍스트를 그리고 이미지를 추가하는 여러 가지 방법이 있다.
HTML 캔버스 예제
캔버스는 HTML 페이지의 직사각형 영역이다. 기본적으로 캔버스에는 테두리와 내용이 없다.
마크업은 다음과 같습니다:
|
<canvas id="myCanvas" width="200" height="100"></canvas>
|
참고: 항상 id 특성(스크립트에서 참조)과 너비 및 높이 특성을 지정하여 캔버스 크기를 정의한다.
테두리를 추가하려면 스타일 특성을 사용한다.
다음은 비어 있는 기본 캔버스의 예입니다:
| <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> 브라우저가 HTML 캔버스 태그를 지원하지 않습니다. </canvas> </body> </html> |
실행 결과는 아래 그림과 같다.
이제 캔버스 위에 선을 그려보자.
선을 그리기 위해서는 자바스크립트를 작성해야 한다.
자바스크립트로 선, 원, 텍스트를 그려보자
직사각형 캔버스 영역을 작성한 후에는 JavaScript를 추가하여 도면을 작성해야 한다.
다음은 몇 가지 예입니다:
아래 표는 선을 그리는 자바스크립트를 추가한 소스 코드이다.
자바스크립트로 선 그리기
| <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 브라우저가 HTML 캔버스 태그를 지원하지 않습니다.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> </body> </html> |
실행 결과는 아래 그림과 같다.
자바스크립트로 원 그리기
아래 예제는 HTML 캔버스 위에 원을 그리는 예제이다.
| <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 브라우저가 HTML 캔버스 태그를 지원하지 않습니다..</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script> </body> </html> |
아래 그림은 HTML 캔버스 위에 원을 그린 결과물이다.
다음은 HTML 캔버스 위에 텍스트를 그려보자
자바스크립트로 텍스트 그리기
아래 코드는 자바스크립트로 텍스트를 캔버스 위에 그리는 예제이다.
| <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 브라우저가 HTML 캔버스 태그를 지원하지 않습니다..</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50); </script> </body> </html> |
위의 코드의 결과물은 아래 그림과 같다.
자바스크립트로 획 텍스트 그리기 (Stroke Text)
외곽선 텍스트를 HTML 캔버스에 그리는 예제이다.
| <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 브라우저가 HTML 캔버스 태그를 지원하지 않습니다..</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World",10,50); </script> </body> </html> |
위의 코드의 결과물은 아래 그림과 같다.
자바스크립트로 리니어 그라디언트 그리기(Linear Gradient)
| <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 브라우저가 HTML 캔버스 태그를 지원하지 않습니다..</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); </script> </body> </html> |
위의 코드의 결과물은 아래 그림과 같다.
자바스크립트로 원형 그라디언트 그리기(Circular Gradient)
| <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 브라우저가 HTML 캔버스 태그를 지원하지 않습니다..</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); </script> </body> </html> |
위의 코드의 결과물은 아래 그림과 같다.
자바스크립트로 이미지 그리기
| <!DOCTYPE html> <html> <body> <p>Image to use:</p> <img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"> <p>Canvas to fill:</p> <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"> 브라우저가 HTML 캔버스 태그를 지원하지 않습니다..</canvas> <p><button onclick="myCanvas()">Try it</button></p> <script> function myCanvas() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img,10,10); } </script> </body> </html> |
위의 코드의 결과물은 아래 그림과 같다.
지금까지 간략히 HTML 캔버스 위에 선, 원, 텍스트, 선형/원형 그라디언트, 그리고 이미지를 그리는 예제를 살펴보았다.
모두 꼭 실습하여 실력을 향상시키기 바란다.
모두 화이팅입니다.!!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 멀티미디어(HTML Multimedia) (0) | 2023.06.18 |
|---|---|
| HTML SVG 그래픽스 (0) | 2023.06.17 |
| HTML input form* 속성 (0) | 2023.06.15 |
| HTML input 속성-3 (0) | 2023.06.14 |
| HTML input 속성-2 (0) | 2023.06.13 |
댓글