canvas 사용하기

2013. 11. 26. 16:50

<!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>

</HTML>

일기장