<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML과 script를 사용한 그리기</title>
<style>
/*
*/
span {border:3px double #00C ;
/*display:block;*/
}
div {background-color:#0F0 ;
margin-bottom:3px;
margin-bottom:5px;
/*display:inline;*/
}
</style>
<script>
window.onload=function(){
div0 = document.getElementById("div0");
div0.innerHTML += "안녕";
div0.innerHTML = "다 지워진다";
// 페이지에 div가 몇개인가?
divs = document.getElementsByTagName("div");
div0.innerHTML += "div가 몇개있나? " + divs.length;
div0.innerHTML += "두번째 div값은? " + divs[1].innerHTML;
div0.innerHTML += "세번째 div값은? " + divs[2].innerHTML;
div0.innerHTML += "<br/><br/>첫번째 div값은? " + divs[0].innerHTML;
canvases = document.getElementsByTagName("canvas");
ctx = canvases[0].getContext("2d");
ctx.fillStyle="rgb(20,80,160)";
ctx.strokeStyle="red";
ctx.fillRect(5, 5, 100, 50); // x, y, 가로길이, 세로길이
ctx.strokeRect(5, 110, 50, 20);
ctx1 = canvases[1].getContext("2d");
ctx1.strokeStyle="blue";
ctx1.beginPath(); //시작하자
ctx1.moveTo(5,5); //이동
ctx1.lineTo(55,5); //선 그어라
ctx1.stroke(); //테두리
ctx1.beginPath(); //시작하자
ctx1.moveTo(75,5); //이동
ctx1.lineTo(125,5); //선 그어라
ctx1.stroke(); //테두리
ctx1.beginPath(); //시작하자
ctx1.moveTo(35,35); //이동
ctx1.lineTo(65,15);//선 그어라
ctx1.lineTo(100,35);//선 그어라
ctx1.closePath();//빈공간 닫기
ctx1.stroke(); //테두리
ctx1.fillStyle="rgb(200,30,30)";
ctx1.beginPath();
//Math.PI*2 = 180도, 0도 = 0
ctx1.arc(); //곡선의 x, y, 반지름, 시작각도, 끝각도, 반시계방향?
ctx1.arc(120,50,20,0,Math.PI*2);
ctx1.fill();//ctx1.stroke();
ctx1.beginPath();
ctx1.arc(40,50,10,0,Math.PI,true);
ctx1.stroke();
ctx1.beginPath();
ctx1.arc(15,50,10,0,Math.PI/180*90,true);
ctx1.stroke();
//곰돌이 얼굴
ctx1.beginPath();
ctx1.arc(200,50,20,0,Math.PI*2,true);
ctx1.fill();
ctx1.beginPath();
ctx1.arc(180,30,5,0,Math.PI/180*120,true);
ctx1.stroke();
ctx1.beginPath();
ctx1.arc(220,30,5,Math.PI,Math.PI/180*45,false);
ctx1.stroke();
ctx1.strokeStyle="white";//입 그리기
ctx1.moveTo(190,60);//시작점x,시작점y
//중간점x,중간점y,끝점x,끝점y
ctx1.quadraticCurveTo(200,75,210,60);
ctx1.closePath();
ctx1.fillStyle="white";
ctx1.fill();
//ctx1.stroke();
}
</script>
</head>
<body>
<canvas style='border:2px groove #000'> </canvas>
<canvas style='border:2px groove #000'> </canvas>
<span> span </span>
<div id="div0"> div </div>
<hr/>
<div> 1 </div>
<div> 2 </div>
<span> 3 </span>
<span> 4 </span>
</body>
</html>
