어떠한 도형을 그릴 때 정해야할 것이 있습니다.
- 어떤 모양의 도형인지
- 어떤 크키의 도형인지
- 어디에 그릴건지
먼저 <canvas>는 기본적으로 직사각형의 도형을 제공합니다.
직사각형을 그리는데에는 세가지 함수가 있습니다.
- fillRect(x, y, width, height) : 색칠된 직사각형을 그리는 함수(기본 색은 검정)
- strokeRect(x, y, width, height) : 직사각형 윤곽선을 그리는 함수
- clearRect(x, y, width, height) : 특정 부분의 직사각형을 지우는 함수(지운다 = 투명하게 만든다)
각가의 세 함수는 모두 같은 매개변수를 가집니다.
- x : 사각형 시작점의 x축 좌표
- y : 사각형 시작점의 y축 좌표
- width : 사각형의 너비, 양수값은 오른쪽 음수는 왼쪽으로 이동
- height : 사각형의 높이, 양수값은 아래로 음수값은 위로 이동
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas tutorial</title>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
}
}
</script>
<style type="text/css">
* {margin: 0; padding: 0; background-color: antiquewhite;}
canvas {
border: 1px solid black;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</body>
</html>
fillRext() 함수는 왼쪽에서 25px, 위에서 25px 떨어진 위치에 가로 세로 100px 사이즈의 색칠된 사각형을 그립니다.
clearRext() 함수는 왼쪽에서 45px, 위에서 45px 떨어진 위치에 가로 세로 60px 사이즈의 사격형 크기로 자웁니다.
strokeRect() 함수는 왼쪽에서 50px, 위에서 50px 떨어진 위치에 가로 세로 50px 사이즈의 윤곽선만 있는 사각형을 그립니다.
**참고 사이트 https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial
반응형
'HTML' 카테고리의 다른 글
| HTML <canvas> moveTo()함수 - 펜 이동하기 (0) | 2022.04.25 |
|---|---|
| HTML <canvas> 경로(path) 기본 개념 (0) | 2022.04.22 |
| HTML <canvas> 란? (0) | 2022.04.21 |
| 반응형 이미지맵 만들기 a~z (0) | 2022.03.29 |
| HTML5 태그 종류 총 정리 (0) | 2022.02.23 |
