canvas 요소
- cnavas 요소는 웹 페이지에서 그래픽을 그리기 위해 사용되는 요소입니다.
- 그래픽만을 위한 컨테이너 역할을 하고 경로, 상자, 원, 텍스트 그리기 및 이미지 추가와 같은 다양한 메서드를 가지고 있습니다.
- canvas 요소의 폭과 높이는 CSS 픽셀로 정의되며, 명시하지 않을 경우 기본값으로 300x150 픽셀이 설정됩니다.
- cnavas 요소는 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작, 실시간 비디오 처리등 다양한 용도로 사용될 수 있습니다.
canvas 요소의 속성
- cnavas 요소는 id 와 style 속성만 존재한다.
canvas 그림 그리기
- 사각형 그리기
<canvas id="drawCanvas" width="300px" height="200px" style="border: 1px solid #993300">
이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>
<script>
var paper = document.getElementById("drawCanvas");
var context = paper.getContext("2d");
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);
</script>위 예제에서 사각형을 그리는데 사용한 함수들의 파라미터
1. 사각형의 왼쪽 위 꼭짓점의 x좌표
2. y좌표
3. 사각형의 너비
4. 사각형의 높이
사각형을 그리는데 사용한 스크립트 함수
- fileStyle() : 사각형 영역을 채울 색상을 설정. 색상값만을 사용할 수도 있고, 투명도까지 명시 가능.
- fileRect() : 사각형을 그리기 시작할 시작점의 x,y 좌표와 너비, 높이 등을 명시
- strokeRect() : 사각형 영역에 테두리를 그릴 때 사용함
- clearRect() : 지정된 사각형 영역을 투명하게 만듦
- 선 그리기
<h1>canvas 요소에 선 그리기</h1>
<canvas id="drawCanvas" width="300px" height="200px" style="border: 1px solid #993300">
이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>
<script>
var paper = document.getElementById("drawCanvas");
var context = paper.getContext("2d");
context.moveTo(0, 0);
context.lineTo(300, 100);
context.lineTo(150, 150);
context.stroke();
</script>
canvas 요소에 선 그리기
선을 그리는데 사용한 스크립트 함수
- moveTo() : 선이 시작될 좌표를 설정
- lineTo() : 선이 끝나는 좌표를 설정. lineTo() 함수를 연속적으로 사용할 때의 시작 위치는 이전 선 그리기가 끝난 위치로 자동 설정된다.
- stroke() : 선 그리기 시작.
이러한 선 그리기를 이용하면 도형에 색을 채우는 것도 가능합니다.
<canvas id="drawCanvas" width="300px" height="200px" style="border: 1px solid #993300">
이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>
<script>
var paper = document.getElementById("drawCanvas");
var context = paper.getContext("2d");
context.moveTo(0, 0);
context.lineTo(300, 100);
context.lineTo(200, 0);
context.lineTo(0, 0);
context.fillStyle = "#0099FF";
context.fill();
context.stroke();
</script>
- 원 그리기
<h1>canvas 요소에 원 그리기</h1>
<canvas id="drawCanvas" width="300px" height="200px" style="border: 1px solid #993300">
이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>
<script>
var paper = document.getElementById("drawCanvas");
var context = paper.getContext("2d");
context.beginPath();
context.arc(150, 100, 50, 0, 2 * Math.PI);
context.stroke();
</script>
canvas 요소에 원 그리기
위 예제에서 사용된 arc 함수의 파라미터
1. 원의 중심 x좌표
2. y좌표
3. 반지름
4. 원호를 그리기 시작할 각도
5. 마칠 각도
원을 그리는데 사용한 스크립트 함수
- beginPath() : 도형 그리기를 시작.
- arc() : 원의 중심 좌표, 반지름, 시작 위치와 종료 위치 등을 설정.
- closePath() : 도형 그리기를 종료.
- 텍스트 그리기
<h1>canvas 요소에 텍스트 그리기</h1>
<canvas id="drawCanvas" width="300px" height="200px" style="border: 1px solid #993300">
이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>
<script>
var paper = document.getElementById("drawCanvas");
var context = paper.getContext("2d");
context.font = "40px Arial";
context.fillText("CANVAS", 50, 90);
context.strokeText("HTML5", 80, 150);
</script>
canvas 요소에 텍스트 그리기
위 예제에서 텍스트를 그리는 데 사용된 함수들의 인수
1.canvas 요소에 그릴 텍스트의 내용
2.텍스트의 왼쪽 위 꼭짓점의 x좌표
3. y 좌표
사용한 스크립트 함수
- font() : 텍스트의 크기, 폰트와 색상 등을 설정
- fileText() : 텍스트의 내용과 텍스트를 그리기 시작할 위치의 좌표를 설정
- strokeText() : 테두리만 있는 텍스트를 그릴 때 사용
- 그래디언트(gradient) 그리기
<h1>canvas 요소에 선형 그래디언트 그리기</h1>
<canvas id="drawCanvas" width="300px" height="200px" style="border: 1px solid #993300">
이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>
<script>
var paper = document.getElementById("drawCanvas");
var context = paper.getContext("2d");
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);
</script>
canvas 요소에 선형 그래디언트 그리기
위 예제에서 사용된 createLinearGradient() 함수의 인수
1. 선형 그래디언트가 시작하는 점의 x 좌표
2. y 좌표
3. 끝나는 점의 x 좌표
4. y좌표
createLinearGradient() 함수를 사용하여 선형 그래디언트를 생성하고 addColorStop() 함수를 사용하여 그래디언트에 사용될 색상을 명시할 수 있습니다. 또한 이렇게 생성된 그래디언트는 fileStyle이나 strokeStyle 속성을 이용하여 그릴 수 있습니다.
<h1>canvas 요소에 원형 그래디언트 그리기</h1>
<canvas id="drawCanvas" width="300px" height="200px" style="border: 1px solid #993300">
이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>
<script>
var paper = document.getElementById("drawCanvas");
var context = paper.getContext("2d");
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);
</script>
canvas 요소에 원형 그래디언트 그리기
위의 예제에서 사용된 createRadialGradient() 함수는 다음 순서대로 인수를 전달받습니다.
1. 원형 그래디언트가 시작하는 원의 중심 x좌표
2. y좌표
3. 원의 반지름
4. 원형 그래디언트가 끝나는 원의 중심 x좌표
5. y좌표
6. 원의 반지름
그래디언트를 그리는데 사용하는 스크립트 함수
- createLinearGradient() : 선형 그래디언트를 그리기 시작할 시작 위치와 종료 위치의 좌표
- createRadialGradient() : 원형 그래디언트를 그리기 시작할 큰 원의 중심 좌표, 반지름과 그래디언트가 끝날 작은 원의 중심 좌표, 반지름 등을 설정
- addColorStop() : 그래디언트의 색을 설정함, 시작점인 0에서부터 종료점인 1까지 다양한 색 지정이 가능하다.
- 이미지 그리기
<h1>canvas 요소에 이미지 그리기</h1>
<img id="Monalisa" src="/examples/images/img_monalisa.png" alt="모나리자" width="180" height="280">
<p>원본 이미지</p>
<canvas id="drawCanvas" width="200px" height="300px" style="border: 1px solid #993300">
이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>
<p><button onclick="drawImage()">이미지 그리기</button></p>
<script>
function drawImage() {
var paper = document.getElementById("drawCanvas");
var context = paper.getContext("2d");
var srcImg = document.getElementById("Monalisa");
context.drawImage(srcImg, 10, 10);
}
</script>위의 예제에서 사용된 drawImage() 함수의 인수
1. canvas 요소에 그릴 이미지의 주소
2. 이미지의 왼쪽 위 꼭짓점의 x좌표
3. 이미지의 왼쪽 위 꼭짓점의 y좌표
이미지를 그리는데 사용하는 스크립트 함수
- drawImage() : canvas 요소에 그릴 이미지의 주소와 이미지가 그려질 시작 위치를 설정
[출처] : TCPSchool.com
'웹 > HTML5' 카테고리의 다른 글
| HTML5 - svg (0) | 2023.06.26 |
|---|---|
| HTML5 - 플러그인 (0) | 2023.06.25 |
| HTML5 - 멀티미디어(2) (0) | 2023.06.25 |
| HTML5 - 멀티미디어 (0) | 2023.06.25 |
| HTML5 - input 요소와 form 요소 속성 (2) (0) | 2023.06.24 |