[HTML5] 3. 캔버스
2010. 8. 27. 18:14
Web Develop Note/HTML&css
<!doctype html>
<html>
<body>
<canvas id="canvas1" width="300" height="200"></canvas>
<script type="text/javascript">
//canvas DOM 객체를 생성
var canvas = document.getElementById("canvas1");
//그리기 컨텍스트를 생성
var context = canvas.getContext("2d");
//사각형 그리기
context.fillRect(0, 0, 150, 100);
//텍스트 그리기
context.fillText("Hello, Canvas!", 155, 110);
//선 그리기 시작
context.beginPath();
//선 그리기
context.moveTo(0, 100);
context.lineTo(300, 100);
context.moveTo(150, 0);
context.lineTo(150, 200);
//캔버스의 윤곽을 그린다.
context.rect(0, 0, 300, 200);
//화면에 출력
context.stroke();
//선그리기 종료
context.closePath();
</script>
</body>
</html>
strokeRect(x, y, w, h) - 사각형의 윤곽을 그립니다. (x, y)가 사각형의 왼족 위 시작점이 되며 w는 사각형의 넓이를 나타내고 y는 사각형의 높이를 나타냅니다.
fillRect(x, y, w, h) - 사각형을 색으로 채웁니다.
clearRect(x, y, w, h) - 지정된 사각형의 영역을 지웁니다.
strokeRect(x, y, w, h) - 사각형의 윤곽을 그립니다. (x, y)가 사각형의 왼족 위 시작점이 되며 w는 사각형의 넓이를 나타내고 y는 사각형의 높이를 나타냅니다.
fillRect(x, y, w, h) - 사각형을 색으로 채웁니다.
clearRect(x, y, w, h) - 지정된 사각형의 영역을 지웁니다.