본문 바로가기

fillText2

차트(Chart) 만들기 - 막대 그래프 차트(Chart) 만들기 차트(Chart)는 다양한 분야에서 사용되고 있고 특히 다수의 데이터를 간의 관계를 나타내는데 특별히 효과적이라서 실적이나 장래 성장 가능성 및 목표 매출등과 같은 것을 시각화하는데 효과적입니다. 이러한 차트를 만드는데 있어 HTML5 요소(Element) 중 Canvas 요소는 여러분들에게 다양한 형태의 차트(Chart)를 만들 수 있도록 합니다. 여기서는 Canvas를 이용하여 다양한 형태의 챠트 중에서 막대(bar), 파이(pie) 차트(chart) 만드는 방법에 대해서 알아봅니다. 막대 차트(bar chart) 만들기 먼저 막대(bar) 형태의 차트를 만들기 위해서는 이미 canvas 부분에서 다루었지만 다시 설명하면 기본적으로 직사각형(Rectangle)을 만드는 방법을.. 2013. 8. 8.
6. Text 6. Text 이제 캔버스(canvas)에서 텍스트(Text)를 사용하는 방법에 대해 알아봅니다. Text와 관련된 context의 메서드들을 나타내면 다음과 같습니다. 메서드 기능 fillText(text, x, y [, maxWidth]) 기본 검은색으로 입력 파라미터인 (x, y) 좌표점에 텍스트를 채워 그립니다. 옵션으로 maxWidth 값을 설정하면 텍스트의 최대 너비를 설정 strokeText(text, x, y [, maxWidth]) 기본 검은색으로 입력 파라미터인 (x, y) 좌표점에 텍스트를 채우지 않고 그립니다. 옵션으로 maxWidth 값을 설정하면 텍스트의 최대 너비를 설정 measureText(text) text의 너비를 포함하는 객체를 반환 “basic.html” 파일을 메모장.. 2013. 8. 7.