본문 바로가기

strokeRect2

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.
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.

티스토리툴바