canvas 썸네일형 리스트형 [canvas] gauge chart 구현하기 앞에서 원호를 그려 봤고 text를 입력해 봤습니다. 이를 활용하여 gauge chart를 쉽게 구현 해 볼 수 있습니다. 아래와 같은 gauge chart 를 구현 해 보겠습니다. draw draw 앞의 원호를 잘 이해 하셨다면 별다른 어려움 없이 이해 하셨을 겁니다. 설명하자면 너무 길어지니 소스를 보시면 이해가 가실꺼라 생각합니다. setInterva()l메서드와 clearInterval()메서드를 사용해 에니메이션을 구현했습니다. gauge chart도 만들 수 있으니 line을 활용하여 bar chart도 충분히 만들 수 있을것이라 생각합니다. 더보기 [canvas] text 입력하기 이번에는 canvas위에 글씨를 써보겠습니다. 글씨를 canvas위에 나타내려면 font속성과 fillText()메서드를 사용합니다. font 요소에서 스타일과 사이즈, 폰트 종류를 설정한다. fillText메서드는 canvas에 보여줄 내용과 폰트가 그려질 좌표를 넣어준다 더보기 [canvas] arc 원호 그리기 이제 곡선을 그려보도록 하겠습니다. 곡선중에서 원호를 그려보도록 하겠습니다. 그리는 방식은 선을 그리는 방식과 유사합니다. beginPath(), arc(), stroke() 메서드를 사용하고 넓이와 색깔은 line에서 적용했던 방식과 같습니다. 이제 아래 그림을 보고 설명하겠습니다. context.arc(x, y, radius, startAngle, endAngle, counterClockwise); arc()메서드의 x와 y는 중심점을 나타 냅니다. radius는 호의 반지름을 나타냅니다. 그리고 startAngle과 endAngle은 호의 시작점과 끝점을 나타냅니다. 위 그림에서 원 모양의 4방향에 숫자가 있습니다. 오른쪽은 0PI 아래는 0.5PI 왼쪽은 1PI 위쪽은 1.5PI로 표시되어 있습니.. 더보기 [canvas] line color 이번에는 선의 색깔을 바꿔보도록 하겠습니다 위 코드를 보면 strokeStyle이라는 속성을 사용하여 line의 색깔을 바꿔 보았습니다. 더보기 [canvas] line width 이번에는 앞에서 그린 선의 넓이를 조정해 보겠습니다. 소스를 보면 lineWidth가 들어간걸 확인 할 수 있습니다. 이 속성을 사용하여 line의 넓이를 조절 할 수 있습니다. 더보기 [canvas] line 그리기 가장 먼저 선을 그려보도록 하겠습니다. 선을 그릴때 다음과 같은 메서드를 사용합니다. beginPath(), moveTo(), lineTo(), stroke() beginPath()는 새로운 선을 그리겠다고 선언하는 것이고 moveTo()는 시작좌표로 시작점을 나타내고 lineTo()는 끝나는 좌표로 어디까지 그리는지 나타냅니다. 마지막으로 stroke()메서드를 써야 canvas위에 그려지게 됩니다. 더보기 [canvas] canvas template 아래는 canvas template를 나타냅니다 canvas 테그를 선언후 id와 높이와 넓이를 지정해 줍니다 우리는 이 canvas라고 정의한 공간안에서 선과, 도형 들을 그리게 됩니다. 더보기 이전 1 다음
