canvas #5 랜덤하게 그리기

2013. 2. 21. 15:02

<%@ page language="java" contentType="text/html; charset=EUC-KR"

pageEncoding="EUC-KR"%>

<!doctype html>

<head>

<title>Canvas Test</title>

</head>

<body>

// 캔버스 객체 취득

var canvas = document.getElementById("myCanvas");

// 이미지 컨텍스트 취득

var ctx = canvas.getContext("2d");

//랜덤하게 다각형 50개 그리기

for (var i=0; i<50; i++) {

randomDraw();

}

//지정한 범위내에서 랜덤한 정수를 리턴하는 함수

function randomI(nFrom, nTo) {

var f = nTo - nFrom + 1;

return Math.floor(Math.random() * f) + nFrom;

}

function randomDraw() {

ctx.beginPath();

//점의 갯수를 랜덤하게 생성

var n = randomI(2, 7); //2각형부터 6각형까지

ctx.moveTo(randomI(0, canvas.width), randomI(0, canvas.height));

for (var i=0; i<n; i++) {

ctx.lineTo(randomI(0, canvas.width), randomI(0, canvas.height));

}

ctx.closePath();

//그림을 그리자!

ctx.fillStyle = "#" + randomI(0, 0xFFFFFF).toString(16);

ctx.fill();

}

</script>

</body>

</html>

Hyungu Im