728x90
패스 랜더링
패스 랜더링이란 특정 위치의 점들을 지정하여 다각형을 그리는 작업을 의미한다.
1. 패스 지정 메서드
| 메서드 | 기능 |
| beginPath() | 패스 지정을 초기화 한다. |
| closePath() | 현재까지 지정한 패스를 닫는다. |
| moveTo(x, y) | 랜더링 시작점을(x,y)로 지정한다. |
| lineTo(x, y) | 이전 랜더링 위치에서 (x,y)까지 선을 긋는다. |
2. 패스 렌더링용 메서드
| 메서드 | 기능 |
| stroke() | 패스(테두리)를 렌더링한다. |
| fill() | 패스 내부를 채운다. |
3. 렌더링 스타일 속성
| 속성 | 기능 |
| fillStyle | 패스 내부를 채울 때 사용되는 색 및 스타일 지정 |
| strokeStyle | 패스 선의 색 및 스타일 지정 |
| lineWidth | 패스 선의 굵기를 지정 |
[예제] 삼각형 그리기
<!doctype html>
<html>
<head>
<script>
window.onload = function(){
canvas = document.getElementById("example");
cont = canvas.getContext("2d");
cont.fillStyle = "rgba(0,100,100,0.5)";
cont.beginPath();
cont.moveTo(100,100);
cont.lineTo(100,200);
cont.lineTo(200,200);
cont.lineTo(100,100);
cont.strokeStyle="rgba(255,0,0,0.5)";
cont.lineWidth="5";
cont.stroke();
cont.closePath();
}
</script>
</head>
<body>
<canvas id="example" width="400" height="300"/>
</body>
</html>
[실행결과]
728x90
'BOOK > HTML5' 카테고리의 다른 글
| 미디어 (0) | 2021.08.15 |
|---|---|
| 원과 사각형 렌더링 (0) | 2021.08.14 |
| gradient (0) | 2021.08.11 |
| background (0) | 2021.08.10 |
| border-radius (0) | 2021.08.09 |
댓글