Canvas 썸네일형 리스트형 [svg] canvas와 svg canvas를 활용해 chart등을 구현하고 잘 활용했는데 문제가 있었다. 데스크탑 웹브라우저는 똑같아 보이지만 확대하거나 모바일 웹에서는 흐릿하게 보인다는 것이었다. 아래를 비교해보자 위 원은 canvas 아래원은 svg를 사용해 그렸다 모바일에서 녹색원 테두리가 흐릿하게 보이는걸 확인 할 수 있다. 이렇게 모바일 환경까지 생각한다면 canvas가 아니라 svg를 사용해야 한다고 느꼈다. svg는 Scalable Vector Graphics의 약자이고 웹에서 사용되는 Vector기반의 그래픽을 정의하는데 사용된다. 확대 또는 축소되더라도 품질이 손상되지 않고 파일에 포함되는 모든 요소와 속성은 동영상화 될 수 있고 W3c가 추천한다. 다음부터 svg 도형을 그리는 방법부터 알아보겠다. 더보기 [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 다음
