DOM/Canvas
-
1-7. 도형 합성 - Canvas API | MDNDOM/Canvas 2021. 3. 23. 16:26
이전의 모든 예제에서 도형은 항상 다른 것 위에 그려졌습니다. 대부분의 상황에 적합하지만 도형이 합성되는 순서를 제한합니다. globalCompositeOperation 속성을 설정하여 이러한 동작을 변경할 수 있습니다. 또한 clip 속성을 사용하면 원하지 않는 모양 부분을 숨길 수 있습니다. globalCompositeOperation 기존 도형 뒤에 새로운 도형을 그릴 수 있을 뿐만 아니라, 특정 영역을 가리고 캔버스의 특정 부분을 지우는 데 사용할 수 있습니다. (clearRect() 메소드처럼 직사각형에 국한되지 않음) globalCompositeOperation = type 새로운 도형을 그릴 때, 도형 합성 방법을 설정합니다. type은 다음 26종류의 합성 방법 중에서 선택할 수 있습니다...
-
1-6. 변형 - Canvas API | MDNDOM/Canvas 2021. 3. 15. 17:16
이 튜토리얼의 앞부분에서는 canvas 그리드와 좌표 공간에 대해 알아 보았습니다. 지금까지는 기본적인 그리드만 사용하고 필요에 따라 전체 canvas의 크기를 바꾸기만 했습니다. Transformation(변형)에는 그리드를 원점에서 다른 위치로 옮기고, 회전하며, 확대·축소까지 하는 더 강력한 방법들이 있습니다. 상태(state)의 저장과 복원 변형(transformation) 메소드를 살펴보기 전에, 더 복잡한 도면을 생성하기 시작하면 반드시 필요한 두 가지 다른 방법을 살펴보겠습니다. save() : canvas의 모든 상태를 저장합니다. restore() : 가장 최근에 저장된 canvas 상태를 복원합니다. Canvas 상태는 스택(stack)에 쌓입니다. save() 메소드가 호출될 때마다 ..
-
1-5. 이미지 사용하기 - Canvas API | MDNDOM/Canvas 2021. 3. 8. 10:02
지금까지 우리는 Canvas를 가지고 도형을 만들고 그 도형에 스타일을 적용해봤습니다. 이미지를 사용하는 기능은 의 가장 흥미로운 기능 중 하나입니다. 이 기능은 게임의 그래픽 배경이나 혹은 동적 사진 합성을 위해 사용할 수 있습니다. PNG, GIF, JPEG 등 브라우저에서 지원되는 형식 형태라면 어떠한 외부 이미지라도 사용할 수 있습니다. 같은 페이지 소스에서 다른 Canvas 요소로 만들어진 이미지 또한 사용할 수 있습니다! 이미지를 캔버스로 불러오는 것은 기본적으로 두 단계를 필요로 합니다. HTMLImageElement 개체를 참조하거나 다른 캔버스 요소를 소스로 사용합니다. URL을 제공하여 이미지를 사용할 수 있습니다. drawImage() 기능을 사용하여 캔버스에 나타난 이미지 위에 그림..
-
1-4. 텍스트 그리기 - Canvas API | MDNDOM/Canvas 2021. 3. 5. 10:45
이전 챕터에서 스타일과 컬러를 적용하는 방법에 대해서 보았고 이번에는 캔버스에 텍스트를 그리는 방법에 대해서 볼 예정입니다. 텍스트 그리기 캔버스 렌더링 컨텍스트(canvas rendering context)는 텍스트를 렌더링하는 두 가지 방법을 제공합니다. fillText(text, x, y [, maxWidth]) : 주어진 (x, y) 위치에 주어진 텍스트를 채웁니다. 최대 폭(width)은 옵션 값 입니다. strokeText(text, x, y [, maxWidth]) : 주어진 (x, y) 위치에 주어진 텍스트를 칠(stroke)합니다. 최대 폭(width)은 옵션 값 입니다. fillText 예제 텍스트는 현재의 fillStyle을 사용하여 채워집니다. function draw() { var..
-
1-3. 스타일과 색 적용하기 - Canvas API | MDNDOM/Canvas 2021. 3. 3. 17:06
도형 그리기 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그라디언트, 패턴 및 그림자를 추가하는 방법을 배우게됩니다. 색상 지금까지는 그리기 메소드만 살펴봤습니다. 도형에 색을 적용하고자 하면, fillStyle과 strokeStyle 두 가지 중요한 속성을 사용할 수 있습니다. fillStyle = color : 도형을 채우는 색을 설정합니다. strokeStyle = color : 도형의 윤곽선을 설정합니다. 여기서의 color는 CSS의 , 그라디언트 객체, 패턴 객체를 뜻합니다. 그라디언트 객체와 패턴 객체는 페이지 아래에서 설명합니다. 윤곽선과 채움 색의 초기 설정값은 ..
-
1-2. 도형 그리기 - Canvas API | MDNDOM/Canvas 2020. 7. 28. 21:59
이제 어떻게 캔버스에 그릴수 있는지에 대하여 자세하게 알아봅시다. 이 글을 끝내고 난 후, 여러분은 어떻게 사각형, 삼각형, 선, 아치, 곡선 등 의 기본적인 도형을 그릴수 있는지 익히실 수 있을 것 입니다. 캔버스 위에 물체를 그릴 때에는 path를 사용하는것이 필수적이므로 우리는 이것이 어떻게 사용되는지 볼 것입니다. 그리드 드로잉을 시작 하기에 앞서, 캔버스 그리드 혹은 좌표공간 (coordinate space) 에 대하여 이야기 해보겠습니다. 이전 페이지에서 이야기 했던 HTML 골격(skeleton)는 가로 세로 각각 150 픽셀의 캔버스 요소를 가지고 있습니다. 오른쪽에 보시면, 캔버스와 기본 그리드가 놓인것을 보실 수 있습니다. 기본적으로 그리드의 1단위는 캔버스의 1픽셀과 같습니다. 이 그..
-
1-1. 기본 사용 - Canvas API | MDNDOM/Canvas 2020. 5. 6. 19:12
[출처 : https://developer.mozilla.org] 요소 태그 는 src 및 alt 속성이 없다는 점만 제외하면 요소와 비슷합니다. width와 height 두 속성만 있습니다. 이 속성은 선택사항이며 DOM 프로퍼티를 사용하여 설정 가능합니다. width와 height을 지정하지 않으면 기본 크기는 가로 300px, 세로 150px. CSS에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다. CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다. ※ 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 속성에서 width 및 height 속성을 명시적으로 지정 실제 캔버스 위에 그리는 것에는 영향을 끼치..