그리기
Canvas가 지원하는 도형
SVG와는 달리, Canvas는 단하나의 도형 직사각형만을 지원합니다.
Canvas 사각형 그리기
fillRect(x, y, width, height) : 속이 찬 사각형을 그립니다.
strokeRect(x, y, width, height) : 사각형의 테두리를 그립니다.
clearRect(x, y, width, height) : 지정한 영역을 지워서 완전히 투명하게 만듭니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>사각형 그리기</title>
<meta charset="utf-8" />
<script type="text/javascript">
function rectDrawing() {
var canvasObj = document.getElementById("myCanvas");
if (canvasObj.getContext) {
var canvas = canvasObj.getContext('2d');
canvas.fillRect(25, 25, 100, 100);
canvas.clearRect(45, 45, 60, 60);
canvas.strokeRect(50, 50, 50, 50);
}
}
</script>
</head>
<body>
<h1>사각형 그리기</h1>
<div onclick="rectDrawing();" style="cursor:pointer">사각형 그리기 호출</div>
<canvas id="myCanvas" width="200" height="200">브라우져에서 지원하지 않습니다.</canvas>
</body>
</html>
Canvas 패스(pass)를 이용한 그리기
1단계: beginpath() 호출
2단계: 그려질 패스를 실제로 지정하는 메서드 호출(ex: moveTo(x, y), lineTo(x, y))
3단계: stroke(), fill() 메서드를 호출하여 그리기 시작.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Path(패스) 그리기</title>
<meta charset="utf-8" />
<script type="text/javascript">
function pathDrawing() {
var canvasObj = document.getElementById('myCanvas');
if (canvasObj.getContext) {
var canvas = canvasObj.getContext('2d');
canvas.beginPath();
canvas.moveTo(75, 50);
canvas.lineTo(100, 75);
canvas.lineTo(100, 25);
canvas.fill();
}
}
</script>
</head>
<body>
<h1>Path(패스) 그리기</h1>
<div onclick="pathDrawing();" style="cursor:pointer">패스 그리기 호출</div>
<canvas id="myCanvas" width="200" height="200">캔버스를 지원하지 않습니다.</canvas>
</body>
</html>