html5 canvas14 파이 차트(Pie Chart) 만들기 파이 차트(Pie Chart) 만들기 canvas에 파이 차트를 그리기 위해서는 기본적으로 canvas 부분에서 설명했었던 arc() 메서드에 대해서 다시 한 번 생각해볼 필요가 있습니다. arc(x, y, radius, startAngle, endAngle [, anticlockwise]) 위에서 x, y는 원의 중심좌표를 radius는 반경을 나타내고 startAngle은 시작 각도를 나타내고 endAngle은 끝 각도를 명시하는데 사용합니다. 각도는 보통 0부터 2 사이값으로 설정하고 실제 코드에서는 자바스크립트의 Math 객체(Object)의 PI 속성을 이용하여 그 각을 표시하게 됩니다. 다시 말해서 45도의 경우 인데 이를 45도는 0.25*Math.PI 형태로 코드를 작성할 수 있다는 것입니.. 2013. 8. 8. 칼라 이미지를 Grayscale 이미지로 나타내기 칼라 이미지를 Grayscale 이미지로 나타내기 Grayscale이란 검은색(black)과 흰색(White)의 중간색인 회색(Gray)의 색상으로 이미지를 표현하는 것으로 빛의 강도(Intensity)를 기준으로 하며 0부터 255까지 즉, 256 단계로 검정색(0)과 흰색(255)을 표현하고 중간 단계인 128은 회색으로 표현합니다. 그래서 RGB 칼라 이미지를 Grayscale 형태의 이미지로 나타내기 위해서는 jQuery 같은 편리한 JavaScript 라이브러리를 이용하면 grayscale() 함수를 이용하여 처리하면 되겠지만 여기서는 순수 javascript를 이용하여 그 기능을 구현하는 방법에 대해서 소개합니다. RGB 색상값을 Gray 색상으로 바꾸는 방법은 다양한 형태가 존재하는데 가장 .. 2013. 8. 8. 11. 이미지(Image) 11. 이미지(Image) 캔버스(canvas)내에서 이미지 작업은 크게 drawImage 메서드를 이용한 캔버스 내 이미지를 그리는 작업, 픽셀(pixel)에 기반한 이미지 가공 작업 및 방금 전 설명한 이미지의 회전, 축소 등과 같은 변환(Transformation) 등을 수행할 수 있습니다. 여기서는 drawImage 메서드를 이용해서 이미지를 캔버스에 그리는 방법과 기존 이미지를 이용하여 어떻게 이미지 픽셀을 추출하여 나타낼 수 있는지 소개하고 마지막으로 여러 개의 이미지를 이용한 슬라이드 쇼 기능을 구현하는 방법에 대해서 다루고자 합니다. 11.1 drawImage 메서드를 이용하여 이미지 그리기 캔버스(canvas)에 이미지를 그리기 위해서는 다음과 같은 3 가지 형태의 drawImage() .. 2013. 8. 7. 9. 캔버스(canvas) 내용을 이미지로 저장 9. 캔버스(canvas) 내용을 이미지로 저장 여러분들이 canvas 내에 그린 직선이나 사각형 같은 이미지들을 이미지 형태(기본 png 형태)로 저장하는 방법은 의외로 간단합니다. 다음과 같은 toDataURL() 메서드를 이용하여 이미지 객체를 이미지 데이터 URL로 설정할 수 있으며 브라우저를 통해 직접 이미지 데이터 URL을 열거나 이미지를 저장할 수 있습니다. canvas.toDataURL([type]) 위에서 입력 파라미터가 없이 사용할 경우 기본 타입은 “image/png”를 의미하게 됩니다. 입력 파라미터의 타입(type)으로 올 수 있는 형태는 “image/jpeg”, “imag/svg+xml”, “text/plain” 등이 올 수 있습니다. toDataURL() 메서드가 실행되면 반환.. 2013. 8. 7. 이전 1 2 3 4 다음
