<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta charset ='utf-8'>
<script type = "text/javascript">
function rect(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.strokeRect(10,10,200,200);
// 사각형 그리기 :
// context.strokeRect(시작점 x좌표, 시작점 y좌표, 사각형의 x좌표, 사각형의 y 좌표)
context.fillRect(220,10,200,200);
// 속이 차 있는 사각형 그리기 :
//context.fillRect(시작점 x좌표, 시작점 y좌표, 사각형의 x좌표, 사각형의 y 좌표)
context.fillRect(430,10,200,200);
context.clearRect(500,50,100,100);
// 속이 차있는 사각형 안을 지우기 :
// context.clearRect(시작점 x좌표, 시작점 y좌표, 사각형의 x좌표, 사각형의 y 좌표)
}
</script>
</HEAD>
<BODY onload = "rect();">
<canvas id ="canvas" align = "center" width = "1024" height="980" style = "border:solid 1px #000000">
<!-- 캔버스 id , 캔버스의 가로,세로, 스타일-->
</canvas>
</BODY>
</HTML>
'IT > 언어' 카테고리의 다른 글
| HTML 5 신규 element 정리 (0) | 2013.11.26 |
|---|---|
| canvas 원호 그리기 (0) | 2013.11.26 |
| canvas 다각형 그리기 (0) | 2013.11.26 |
| canvas 선그리기 (0) | 2013.11.26 |
| Jquery 유용한 사이트 모음 (0) | 2013.11.26 |