마우스로 캔버스 영역에 드래그 하면 선을 그릴 수 있는 예제입니다. <style>canvas { border: 1px solid black; }</style> <canvas id="mycanvas"/> <script type="text/javascript"> var canvas, context; window.onload = function (){ canvas = document.getElemen…

캔버스에 그려진 이미지 파일 형식은 기본값이 PNG입니다. 이것을 image/jpg나 image/webp 형식을 지정하여 이미지 포맷을 변환할 수 있습니다. 메서드 설 명 toDataURL( [mime-type] [,encoderOptions] ) 이미지의 파일 형식을 변환 mime-type: Mime 형식. 선택사항 encoderOptions: 압축률. 선택사항  0~1사이의 수. 기본값: 0.92 …

캔버스는 이미지를 픽셀 단위로 편집할 수 있는 메서드를 제공합니다.  이미지를 구성하는 픽셀정보를 래스터(Raster)라고 부르고 곧 비트맵이라 합니다. 이 비트맵에는 직사각형 격자 화소, 색의 점 등 이미지에 어떤 그림이 그려져 있는지를 저장합니다. 예를 들어 그림을 확대해 보면 아래 그림처럼 픽셀단위로 되어있음을 확인할 수 있습니다. 화소를 영문으로 표기하면 픽셀입니다. 이런 래스터 데이터를 직접 조작하면 그리기로는 불가능한 섬세한 효과를 얻을 수 있습니다. …

원본 캔버스에서 모양과 크기의 영역을 자르는 메서드가 clip() 입니다. 영역이 잘리면 이후의 모든 그리기는 잘린 영역으로 제한됩니다. 따라서 자르기 전에 save()를 사용하여 설정을 저장한 다음 clip() 한 후 restore()로 이전 상태로 복원할 수 있습니다. <style>canvas { border: 1px solid black; }</style> <canvas id="mycanvas"/> <script …

globalCompositeOperation 은 새로운 이미지를 원래 이미지와 병합하여 새로운 이미지를 만들 수 있습니다. 새로운 이미지를 그리면 보통은 기존 이미지 위에 그려져 일정 영역을 가려지게 되는데, 가려 보이지 않게 하거나 특정 부분만 표시되게 할 수 있습니다. globalCompositeOperation = type type에는 아래 표를 사용할 수 있습니다. Type 설 명 source-ove…

캔버스는 도형이나 텍스트를 그리는 게 전부가 아닙니다. 캔버스에 이미지를 그릴 수 있는 흥미로운 기능을 제공합니다. jpg, bmp, gif 형식 등 브라우저가 지원하는 모든 형식의 이미지를 지원하며 <svg>, <video> 요소를 현재 이미지로 사용할 수 있습니다. 메서드 설 명 drawImage(img, x, y) 이미지를 캔버스에 바로 그리기 img: 삽입될 이미지 x: 캔…

캔버스에 그려지는 요소의 그림자 효과를 줄 수 있습니다. 그러기 위해서는 다음 표의 프로퍼티를 사용할 수 있습니다. 프로퍼티 설 명 shadowColor 그림자 색상 shadowOffsetX 그림자가 떨어질 가로 방향 shadowOffsetY 그림자가 떨어질 세로 방향 shadowBlur 그림자…

캔버스에는 CSS와 마찬가지로 요소를 회전시키거나 확대, 축소, 이동, 기울임 등 다양한 변화를 줄 수 있는 메서드를 제공합니다. 메서드 설 명 scale(x, y) 도형 크기를 배 만큼 확대, 축소 (양수, 음수, 실수 허용) x: 가로 크기를 확대, 축소 y: 세로 크기를 확대, 축소 1.0보다 작으면 크기를 줄이고, 크면 크기는 확대 1.0의 값은 단위를 동일한 크기로 유지 …

캔버스에는 선형과 원형 그라디언트를 사용할 수 있는 메서드를 제공합니다. 메소드 설 명 createLinearGradient(x1, y1, x2, y2) 선형 그라디언트 그리기 fillStyle, strokeStyle 중 하나에 그라디언트를 적용 x1: x축 시작점 y1: y축 시작점 x2: y축 끝점 y2: y축 끝점 사각형, 원, 선, 텍스트 등 채우는데 사용 createR…

Save()와 restore()는 캔버스의 설정 값을 저장하고 이전 설정 값을 불러올 수 있습니다. 이때 저장되는 값은 캔버스에 그려진 이미지나, 문자열 값이 아니라 현재 캔버스에 그리기 위해 속성에 적용된 값들입니다. 메서드 설 명 save() 캔버스의 전체 상태를 저장 (캔버스에 그려진 이미지가 아니라 캔버스가 가진 속성에 적용한 값을 저장) restore() …

선 모양을 지정하는 프로퍼티는 아래 표를 사용하여 스타일을 지정할 수 있습니다. 프로퍼티 설 명 strokeStyle 선 색상 fillStyle 채우려는 색상 globalAlpha 투명도를 지정. 0 ~ 1사이의 값 (0에 가까울수록 투명해짐) lineWidth 도형의 선 두께 지정 …

캔버스에 그리는 2가지 방법이 있습니다. 먼저 선이나 원, 사각형 등 모양을 만들어 경로에 담은 다음 경로를 따라 칠하거나 랜더링하는 방법이 있고 두 번째는 경로에 담지 않고 바로 캔버스에 그리는 방법이 있습니다.  프로퍼티 설 명 strokeStyle 선 색상 fillStyle 채우려는 색상 globalAlpha 투명도를 지정.…