전체 글
-
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() 기능을 사용하여 캔버스에 나타난 이미지 위에 그림..
-
Babel과 Webpack을 이용한 ES6 환경 구축 | PoiemaWebFront-end/개발환경 2021. 3. 5. 15:22
Babel는 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)할 수 있다. Babel CLI 설치 # package.json 생성 $ npm init -y # babel-core, babel-cli, babel-preset 설치 $ npm install --save-dev @babel/core @babel/cli @babel/preset-env Babel을 사용하려면 Babel 프리셋을 설치해야 한다. @babel/preset-env은 함께 사용되어야 하는 Babel 플러그인을 모아 둔 것으로, Babel이 제공하는 공식 Babel 프리셋(Official Preset)은 아래와 같다. @babel/preset-env @babel/preset-fl..
-
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의 , 그라디언트 객체, 패턴 객체를 뜻합니다. 그라디언트 객체와 패턴 객체는 페이지 아래에서 설명합니다. 윤곽선과 채움 색의 초기 설정값은 ..
-
HTML 오디어 / 비디오 DOM 참조 | W3CDOM/HTML5 2021. 2. 24. 11:44
HTML 오디어 / 비디오 메소드 Method Description addTextTrack() 오디오 / 비디오에 새 텍스트 트랙을 추가합니다. canPlayType() 브라우저가 지정된 오디오 / 비디오 유형을 재생할 수 있는지 확인합니다. load() 오디오 / 비디오 요소를 다시 로드합니다. play() 오디오 / 비디오 재생 시작 pause() 현재 재생중인 오디오 / 비디오를 일시 중지합니다. HTML 오디오 / 비디오 속성 Property Description audioTracks 사용 가능한 오디오 트랙을 나타내는 AudioTrackList 객체를 반환합니다. autoplay 오디오 / 비디오가 로드되는 즉시 재생을 시작할지 여부를 설정하거나 반환합니다. buffered 오디오 / 비디오의 ..
-
설치 - 시작하기 | Three.jsInteractive/three.js 2021. 2. 8. 12:49
three.js는 npm을 포함한 빌드 툴에서 설치가 가능하고, CDN이나 static 호스팅으로 빠르게 사용이 가능합니다. 대부분의 경우 npm을 통한 설치가 가장 좋은 선택입니다. 어떤 방식을 선택하든, 같은 버전의 라이브러리에서 모든 파일을 동일하게 불러와야 합니다. 여러 소스에서 파일을 혼합해 가져오면 코드 중복이 일어나거나 비정상적으로 앱이 종료될 수 있습니다. three.js의 모든 메서드들은 ES modules (Eloquent JavaScript: ECMAScript Modules 참조)에 기반하고 있으며, 마지막 프로젝트에 필요한 부분만 불러오도록 할 것입니다. npm으로 설치하기 three npm 모듈을 설치하려면, 프로젝트 폴더의 터미널을 열고 다음을 실행합니다. npm install..
-
장면 만들기 - 시작하기 | Three.jsInteractive/three.js 2021. 1. 18. 12:01
이 장의 목표는 three.js에 대한 간략한 설명을 하는 것입니다. spinning cube라는 장면을 설정하는 것부터 시작할 것입니다. 막히거나 도움이 필요할 때에는 아래쪽의 실습 예제를 확인해주세요. 시작하기 전에 three.js를 사용하려면, 표시할 수 있는 공간이 필요합니다. 다음과 같이 HTML 파일을 만들고, js/ 디렉토리 안에 three.js 파일을 만들고 연결시켜 웹 브라우저로 실행해주세요. 이게 전부입니다. 모든 코드들은 비어있는 태그 안에 작성될 것입니다. 장면 만들기 three.js로 무언가를 표현하려면 scene, camera 그리고 renderer가 필요합니다. 이를 통해 카메라로 장면을 구현할 수 있습니다. const scene = new THREE.Scene(); const..