h32. HTML5 캔버스 그래픽

HTML5 캔버스 그래픽

HTML <canvas> 태그는 일반적으로 자바스크립트를 사용하여 간편하게 그래픽을 그리는데 사용됩니다.

<canvas> 태그는 단지 그래픽을 담는 그릇입니다. 실제로 그래픽을 그릴려면 스크립트를 사용해야 합니다.

캔버스는 선, 사각형, 원, 문자, 그리고 이미지를 그리기 위한 몇개의 메소드를 가지고 있습니다.

<canvas> 태그는 크롬, 사파리, 파이어폭스에서 완전하게 지원하며, 익스플로러 에서도 IE9 이상에서 완벽하게 지원합니다.

캔버스는 HTML 페이지상의 사각형 영역입니다. 기본 값으로 테두리선도 없고 내용도 없는 빈 사각형이 생성됩니다.

<canvas id="canvas2" width="250" height="150" style="border:1px solid #0f0f0f;"></canvas>

항상 id 속성을 지정해야하는데 스크립트에서 참조할 때 사용됩니다. 

그리고 가로와 세로 속성으로 캔버스 사이즈를 지정합니다. 

테두리는 스타일 속성을 사용하여 지정합니다.

---

<canvas id="canvas3" width="250" height="200" style="border:1px solid #d3d3d3;">
귀하의 브라우저가 HTML5 캔버스 기능을 지원하지 않습니다.</canvas>

<script>
var a = document.getElementById("canvas3");
var b = a.getContext("2d");
b.moveTo(0,0);
b.lineTo(200,100);
b.stroke();
b.moveTo(200,100);
  /*직선의 시작점 좌표*/
b.lineTo(250,200);
  /*직선의 끝점 좌표*/
b.stroke();
</script>

---

<canvas id="canvas4" width="250" height="250" style="border:1px solid #d3d3d3;">
미안해서 어떻게 하죠? 캔버스 기능이 지원되지 않는 브라우저군요.</canvas>

<script>
var a = document.getElementById("canvas4");
var b = a.getContext("2d");
b.beginPath();
b.arc(125,125,120,0,2*Math.PI);
  /*(중심점 x좌표, 중심점의 y좌표, 반경, 반원 2개)*/
b.stroke();
</script> 

미안해서 어떻게 하죠? 캔버스 기능이 지원되지 않는 브라우저군요.

---

<canvas id="canvas5" width="250" height="80" style="border:1px solid #d3d3d3;">
귀하의 브라우저가 HTML 캔버스 기능을 지원하지 않는군요.</canvas>

<script>
var a = document.getElementById("canvas5");
var b = a.getContext("2d");
b.font = "30px Arial";
b.fillText("채워진 텍스트",20,30);
  /*("텍스트",글자의 좌측 아래점의 x좌표, y좌표)*/
b.strokeText("스트로크 텍스트",40,70);
</script>

귀하의 브라우저가 HTML 캔버스 기능을 지원하지 않는군요.

---

<canvas id="canvas6" width="250" height="150" style="border:1px solid #e3e3e3;">
안타깝습니다. 캔버스 기능이 지원되지 않는 브라우저이군요.</canvas>

<script>
var a = document.getElementById("canvas6");
var b = a.getContext("2d");
var c = b.createLinearGradient(10,10,240,140);
 /*그라디언트 생성(그라디언트 시작점 x좌표, y좌표, 끝점 x좌표, y좌표)*/
c.addColorStop(0,"white");
c.addColorStop(1,"green");
 /*그라디언트 채우기*/
b.fillStyle = c;
b.fillRect(10,10,230,130);
 /*(시작점 좌측 상단 x좌표, y좌표, 가로폭, 세로폭)*/
</script>

안타깝습니다. 캔버스 기능이 지원되지 않는 브라우저이군요.

---

<canvas id="canvas7" width="250" height="150" style="border:1px solid #d3d3d3;">
다른 브라우저로 해보실래요? 캔버스 기능이 지원되지 않는 브라우저 입니다.</canvas>

<script>
var a = document.getElementById("canvas7");
var b = a.getContext("2d");
var c = b.createRadialGradient(155,75,10,120,80,100);
  /*그라디언트 생성(첫번째 원중심 x좌표, y좌표, 반경, 두번째 원중심 x좌표, y좌표, 반경)*/
c.addColorStop(0,"black");
c.addColorStop(1,"pink");
b.fillStyle = c;
b.fillRect(10,10,230,130);
  /*그라디언트 채우기(사각형 영역 좌측 상단 x좌표, y좌표, 우측 하단 x좌표, y좌표)*/
</script>

다른 브라우저로 해보실래요? 캔버스 기능이 지원되지 않는 브라우저 입니다.

---

[광고] Udemy 동영상 강의로 보기