본문 바로가기

fillRect2

차트(Chart) 만들기 - 막대 그래프 차트(Chart) 만들기 차트(Chart)는 다양한 분야에서 사용되고 있고 특히 다수의 데이터를 간의 관계를 나타내는데 특별히 효과적이라서 실적이나 장래 성장 가능성 및 목표 매출등과 같은 것을 시각화하는데 효과적입니다. 이러한 차트를 만드는데 있어 HTML5 요소(Element) 중 Canvas 요소는 여러분들에게 다양한 형태의 차트(Chart)를 만들 수 있도록 합니다. 여기서는 Canvas를 이용하여 다양한 형태의 챠트 중에서 막대(bar), 파이(pie) 차트(chart) 만드는 방법에 대해서 알아봅니다. 막대 차트(bar chart) 만들기 먼저 막대(bar) 형태의 차트를 만들기 위해서는 이미 canvas 부분에서 다루었지만 다시 설명하면 기본적으로 직사각형(Rectangle)을 만드는 방법을.. 2013. 8. 8.
2. 사각형(Rectangle) 그리기 2. 사각형(Rectangle) 그리기 canvas에 사각형을 그리는 것과 관련하여 다음과 같이 3 가지 형태의 메서드들을 이용합니다. 메서드 기능 fillRect(x, y, w, h) 주어진 스타일로 사각형을 칠함 strokeRect(x, y, w, h) 주어진 스타일로 해당 사각형의 외부 라인을 칠함 clearRect(x, y, w, h) 해당 사각형을 투명한 검은색으로 칠함. 실제는 흰색으로 나타남 위에서 x, y, w, h는 방금 전 “colorandstyleEx.html” 예제에서 이해했을 것 같은데요. 각각 x, y는 앞에서 설명한 x, y 좌표를, w는 너비(width), h는 높이(height)를 나타냅니다. 이제 간단한 예제를 해볼까요? “basic.html” 파일을 메모장을 열어서 “/.. 2013. 8. 7.