JavaScript
draw
Bohemian life
2012. 6. 12. 17:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> New Document </title>
<style>
canvas { border:2px solid red;}
</style>
<script>
var i=0;
draw = function draw(){
i++;
canvas=document.getElementsByTagName("canvas");
ctx=canvas[0].getContext("2d");
ctx.fillStyle=colorMake(); // fill 채울때 쓸 컬러
ctx.strokeStyle="red"; // stroke 윤곽그릴때 쓸 컬러
ctx.fillRect(0, 0 , 100,30); // x위치, y위치, 가로길이, 세로길이
ctx.strokeRect(110 , 0 , 80, 15);
//for( i = 0 ; i< 20 ; i++ ){
ctx.fillRect(10+ i*15 , 50 , 10, 10);
//}
}
function colorMake(){ //컬러를 리턴하는 function
no=Math.random()*255; // (0.00000 ~ 1.00000)*255
no=Math.ceil(no) ; // 소수점을 잘라라
color="rgb(0,0," + no + ")" //"rgb(0,0,50)"
return color ;
}
function auto(){
setInterval(draw(),500);
}
</script>
</head>
<body>
<canvas> </canvas>
<button onclick="auto()"> 그리기 </button>
canvas.drawRect(10,20, 50, 60, redColor)
canvas.draeCircle
</body>
</html>