HTML5 - 07.canvas 기본사용 : 삼각형 (캔버스)

티스토리 뷰

Posted by Godffs on 2014. 2. 16. 15:15 in jQuery | javascript | CSS /

캔버스를 이용하여 삼각형을 그리는 예제 입니다.

삼각형 모양을 그릴때는

moveTo(),lineTo() 메서드를 사용해서 좌표를 지정합니다.
moveTo로 시작지점을 그리고, lineTo로 선을 그립니다.

안에 소스에 설명 추가 하였습니다.

ex04.Triangle.html

<!DOCTYPE html>

<head>

#can1 {

width:300px;

height:300px;

}

</style>

</head>

<body>

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

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

//삼각형 그리기

cv.beginPath(); //패스를 초기화

cv.moveTo(50, 0); //시작위치 X,Y좌표

cv.lineTo(0, 50); //선 그리기

cv.lineTo(100, 50); //선 그리기

cv.closePath(); //그리기 종료

cv.fillStyle = "rgb(0,0,255)";

cv.fill(); //삼각형 그리기 렌더링

</script>

</body>

</html>

결과를 확인합니다.

참 쉽죠~? 끝

저작자표시 비영리 변경금지