[HTML, CSS] - HTML 그래픽

 

 

---

---

 

Canvas

웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공

그래픽을 위한 컨테이너(container) 역할만을 수행

따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용

 

canvas 요소의 속성

테두리(border)도 콘텐츠(content)도 없는 웹 페이지 내의 단순한 사각형의 공간

반드시 style 속성을 이용하여 캔버스의 크기를 설정

canvas 요소를 스크립트(script)에서 접근하기 위해서는 해당 요소의 id 속성을 이용

<canvas id="drawCanvas" style="width:300px; height:200px; border: 1px solid #993300;">
    이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>

 

 

사각형 그리기

1. 사각형의 왼쪽 위 꼭짓점의 x좌표

2. 사각형의 왼쪽 위 꼭짓점의 y좌표

3. 사각형의 너비

4. 사각형의 높이

context.strokeRect(10, 10, 250, 130);
context.fillStyle = "rgba(255,0,0,1)";
context.fillRect(20, 20, 200, 100);
context.clearRect(30, 30, 150, 50);

fillStyle()	사각형 영역을 채울 색상을 설정함. 색상값만을 사용할 수도 있고, 투명도까지 명시할 수 있음.
fillRect()	사각형을 그리기 시작할 시작점의 x, y좌표와 사각형의 너비, 높이 등을 설정함.
strokeRect()	사각형 영역에 테두리를 그릴 때 사용함.
clearRect()	지정된 사각형 영역을 투명하게 만듦.

 

 

선 그리기

context.moveTo(0, 0);
context.lineTo(300, 100);
context.lineTo(150, 150);
context.stroke();

moveTo()	선이 시작될 좌표를 설정함.
lineTo()	선이 끝나는 좌표를 설정함. lineTo() 함수를 연속적으로 사용할 때의 시작 위치는 이전 선 그리기가 끝난 위치로 자동 설정됨.
stroke()	선 그리기 시작함.

 

 

원 그리기

1. 원의 중심 x좌표

2. 원의 중심 y좌표

3. 원의 반지름

4. 원호를 그리기 시작할 각도

5. 원호 그리기를 마칠 각도

context.beginPath();
context.moveTo(100, 100);
context.arc(100, 100, 120, 0, 45 * Math.PI / 180);
context.closePath();
context.stroke();

beginPath()	도형 그리기를 시작함.
arc()	원의 중심 좌표와 반지름, 원을 그리기 시작할 시작 위치와 종료 위치의 좌표, 그리는 방향 등을 설정함.
closePath()	도형 그리기를 마침.

 

 

텍스트 그리기

1. canvas 요소에 그릴 텍스트의 내용

2. 텍스트의 왼쪽 위 꼭짓점의 x좌표

3. 텍스트의 왼쪽 위 꼭짓점의 y좌표

context.font = "40px Arial";
context.fillText("CANVAS", 50, 90);
context.strokeText("HTML5", 80, 150);

font()	텍스트의 크기, 폰트(font)와 색상 등을 설정함.
fillText()	텍스트의 내용과 텍스트를 그리기 시작할 시작 위치의 좌표를 설정함.
strokeText()	테두리만 있는 텍스트를 그릴 때 사용함.

 

 

그래디언트 그리기

 

선형

1. 선형 그래디언트가 시작하는 점의 x좌표

2. 선형 그래디언트가 시작하는 점의 y좌표

3. 선형 그래디언트가 끝나는 점의 x좌표

4. 선형 그래디언트가 끝나는 점의 y좌표

var gradient = context.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "#FFCC00");
gradient.addColorStop(1, "#FFCCCC");
context.fillStyle = gradient;
context.font = "45px Arial black";
context.fillText("CANVAS", 15, 120);

 

원형

1. 원형 그래디언트가 시작하는 원의 중심 x좌표

2. 원형 그래디언트가 시작하는 원의 중심 y좌표

3. 원형 그래디언트가 시작하는 원의 반지름

4. 원형 그래디언트가 끝나는 원의 중심 x좌표

5. 원형 그래디언트가 끝나는 원의 중심 y좌표

6. 원형 그래디언트가 끝나는 원의 반지름

var gradient = context.createRadialGradient(100, 100, 200, 150, 150, 30);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "white");
context.fillStyle = gradient;
context.fillRect(0, 0, 300, 300);

 

createLinearGradient()	선형 그래디언트를 그리기 시작할 시작 위치와 종료 위치의 좌표를 설정함.
createRadialGradient()	원형 그래디언트를 그리기 시작할 큰 원의 중심 좌표, 반지름과 그래디언트가 끝날 작은 원의 중심 좌표, 반지름 등을 설정함.
addColorStop()	그래디언트의 색을 설정함. 시작점인 0에서부터 종료점인 1까지 다양한 색 지정이 가능함.

 

 

이미지 그리기

1. canvas 요소에 그릴 이미지의 주소

2. 이미지의 왼쪽 위 꼭짓점의 x좌표

3. 이미지의 왼쪽 위 꼭짓점의 y좌표

<p><button onclick="drawImage()">이미지 그리기</button></p>
...
<script>
    function drawImage() {
        var srcImg = document.getElementById("Monalisa");
        context.drawImage(srcImg, 10, 10);
    }
</script>

drawImage()

canvas 요소에 그릴 이미지의 주소와 이미지가 그려질 시작 위치를 설정함.

 

 

---

 

SVG

 

SVG 요소

XML 기반의 W3C 그래픽 표준 권고안

기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없음

픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현 가능

따라서 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적

 

 

사각형 그리기

 

사각형

<svg width="200" height="150">
    <rect width="200" height="150" stroke="orange" stroke-width="5" fill="yellow"/>
    이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
</svg>

<svg width="200" height="150">
    <rect width="200" height="150" style="stroke:orange; stroke-width:5; fill:yellow; opacity:1;"/>
</svg>

width	도형의 너비를 설정함.
height	도형의 높이를 설정함.
stroke	도형의 테두리 색상을 설정함.
stroke-width	도형의 테두리 굵기를 설정함.
fill	도형을 채울 색상을 설정함.
opacity	도형의 투명도를 설정함.

 

모서리가 둥근 사각형

<svg width="250" height="200">
    <rect width="200" height="150" x="20" y="20" rx="20" ry="20"
        stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

x	사각형의 왼쪽 위 꼭짓점의 x좌표를 설정함.
y	사각형의 왼쪽 위 꼭짓점의 y좌표를 설정함.
rx	사각형 모서리 굴곡의 x축 반지름을 설정함.
ry	사각형 모서리 굴곡의 y축 반지름을 설정함.

 

 

선 그리기

<svg width="250" height="200">
    <line x1="50" y1="50" x2="200" y2="150" stroke="orange" stroke-width="5"/>
</svg>

x1	선이 시작될 위치의 x좌표를 설정함.
y1	선이 시작될 위치의 y좌표를 설정함.
x2	선이 끝나는 위치의 x좌표를 설정함.
y2	선이 끝나는 위치의 y좌표를 설정함.

 

 

원 그리기

<svg width="300" height="300">
    <circle cx="150" cy="120" r="100" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

cx	원의 중심 x좌표를 설정함.
cy	원의 중심 y좌표를 설정함.
r	원의 반지름을 설정함.

 

 

타원 그리기

<svg width="300" height="300">
    <ellipse cx="150" cy="100" rx="120" ry="70" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

cx	타원 중심의 x좌표를 설정함.
cy	타원 중심의 y좌표를 설정함.
rx	타원의 x축 반지름을 설정함.
ry	타원의 y축 반지름을 설정함.

 

 

다각형 그리기

<svg width="300" height="300">
    <polygon points="10,100 190,100 30,200 100,40 170,200"
       stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

points

다각형의 각 꼭짓점이 표시될 위치의 좌표를 설정함.

 

 

---

 

Canvas와 SVG의 차이점

Canvas	SVG
픽셀(pixel) 기반	모양(shape) 기반
단일 HTML 요소	DOM의 일부분이 되는 다중 그래픽 요소
스크립트(script)를 통해서만 수정할 수 있음.	스크립트(script) 및 CSS를 통해서도 수정할 수 있음.
그래픽이 주작업인 게임에 적합함.	렌더링 영역이 넓은 응용 프로그램(application)에 적합함.
화면이 작거나, 픽셀 수가 많을 경우	화면이 크거나, 픽셀 수가 적을 경우
복잡하고 고성능의 애니메이션 작업이나 동영상 조작 등의 작업	고품질의 문서 작업이나 정적 이미지의 조작 작업

 

 

---

 

https://www.tcpschool.com/html/html5_graphic_canvas

https://www.tcpschool.com/html/html5_graphic_svg