코공기(코딩 공부 기록) 코공기(코딩 공부 기록)

현재 진행 중인 프로젝트에서 게임을 개발하는 새로운 경험을 하게 되었다.그러나 게임 페이지는 웹에서도 접근 및 동작이 가능한 페이지이기에 해킹을 방지하고자 canvas로 작업하게 되었고 이번엔 작업하면서 알게 된 canvas의 특징에 대해 정리해보고자 한다.1. HTML Canvas란?HTML Canvas는 HTML5에서 도입된 그래픽을 그릴 수 있는 요소로, 자바스크립트를 사용해 픽셀 단위로 그래픽을 직접 조작할 수 있다. 요소는 벡터 기반이 아닌 비트맵 기반으로 동작하여, 정적인 이미지부터 복잡한 애니메이션, 게임, 데이터 시각화까지 다양한 콘텐츠를 구현할 수 있다. (1) Canvas의 구조와 특징Canvas는 HTML 코드에 삽입되며, 자바스크립트를 통해 다양한 그래픽 요소를 동적으로 생성한다...

해당 게시글은 2022.03.10에 깃허브로 작성되었습니다. 1. 공 그리기 공을 이용해 애니메이션을 배워볼 것이기에 먼저 canvas에 공을 그린다. 이번 canvas는 width 600에 height 300의 속성을 가진다. var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var ball = { x: 100, y: 100, radius: 25, color: 'blue', draw: function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = th..

해당 게시글은 2022.03.10에 깃허브로 작성되었습니다. 한 장면을 그리려면 아래와 같은 단계를 밟는다. 1. 기본 애니메이션 단계 (1) canvas를 지운다. 그리려는 도형이 canvas를 가득 채우는 것이 아니라면, 이전에 그려진 모든 도형을 지울 필요가 있다. 가장 쉬운 방법은 clearRect() 메소드를 사용하는 것이다. (2) canvas 상태를 저장한다. canvas 상태에 영향을 주는 설정값을 바꾸려고 하고, 바뀐 값을 각 장면마다 사용하려고 한다면, 원래 상태를 저장할 필요가 있다. (3) 애니메이션할 도형을 그린다. 실제 장면을 그리는 단계이다. (4) canvas 상태를 복원한다. 새로운 장면을 그리기 전에 저장된 상태를 복원한다. 2. 애니메이션 제어 코드 실행이 완료되면 ca..

해당 게시글은 2022.03.10에 깃허브로 작성되었습니다. 앞선 예제에서는 이미 그려진 도형 위에 그렸으나 도형 합성이 필요할 때에는 속성을 설정함으로써 가능하게 만들 수 있다. 1. 도형 합성 - globalCompositeOperation = type 기존 도형 뒤에 새로운 도형을 그릴 수 있을 뿐만 아니라, 도형의 일정 영역을 가려 보이지 않게 하거나 canvas의 특정 부분을 지우는 효과를 얻을 수 있다. 새로운 도형을 그릴 때, 도형 합성 방법을 설정한다. 더 자세한 type 종류는 아래 이미지를 참고하자. 2. 잘라내기 경로(Clipping Path) 다른 도형에서 원하지 않는 부분을 가리는 가면과 같은 역할을 한다. 위 이미지를 보면 별 모양이 잘라내기 경로이며, 해당 경로 밖에 있는 모든..

해당 게시글은 2022.03.10에 깃허브로 작성되었습니다. 이번 챕터를 통해 그리드를 원점에서 다른 위치로 옮기고, 회전하며, 확대/축소까지 하는 방법들을 배워보자. 1. 상태(state)의 저장과 복원 (1) save() canvas의 모든 상태를 저장 한다. (2) restore() 가장 최근에 저장된 canvas 상태를 복원 한다. canvas 상태는 스택(stack)에 쌓이고 save() 메소드가 호출될 때마다 현재 drawing 상태가 스택 위로 푸시된다. drawing 상태는 아래와 같이 이루어진다. - 이전부터 적용된 변형(translate, rotate, scale) - 다음 속성의 현재 값 strokeStyle, fillStyle, globalAlpha, lineWidth, lineCa..

해당 게시글은 2022.03.10에 깃허브로 작성되었습니다. 에서는 PNG, GIF, JPEG 등 브라우저에서 지원되는 포맷형태라면 어떠한 외부 이미지라도 사용될 수 있다. 이미지를 canvas로 불러오는 것은 기본적으로 다음 두 단계를 필요로 한다. 1. HTMLImageElement object를 참조하거나 다른 요소를 소스로 사용한다. 이는 URL을 가지고 이미지를 사용할 수 있다. 2. drawImage() function을 사용하여 canvas에 나타난 이미지 위에 그림을 그린다. 1. 이미지 불러오기 canvas는 아래의 데이터 타입을 이미지 소스로 사용할 수 있다. - HTMLImageElement element와 마찬가지로, Image() constructor를 통해 만들어진 이미지이다. ..

해당 게시글은 2022.03.10에 깃허브로 작성되었습니다. 캔버스 렌더링 컨텍스트는 텍스트를 렌더링하는 두가지 방법을 제공한다. 1. 텍스트 그리기 (1) fillText(text, x, y, [maxWidth]) 주어진 (x, y) 위치에 주어진 텍스트를 채운다. 최대 폭(width)은 옵션 값이다. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = '48px serif'; ctx.fillText('Hello world', 10, 50); } (2) strokeText(text, x, y, [ maxWidth]) 주어진 (x, y) 위치에 주어진 텍스트를 칠(stroke)한다. 마찬가지로 ..

해당 게시글은 2022.03.10에 깃허브로 작성되었습니다. 1. 색상 아래에서의 color는 CSS의 , 그라디언트 객체, 패턴 객체를 뜻한다. 윤곽선과 채움 색의 초기 설정값은 검은 색이다. strokeStyle 또는 fillStyle 속성을 설정하면, 새로 설정된 값이 앞으로 그려질 도형의 기본 값이 된다. 각 도형에 다른 색을 적용하려면 strokeStyle 또는 fillStyle 속성을 다시 적용해야 한다. (1) fillStyle = color 도형을 채우는 색을 설정한다. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i < 6; i++){ for (var j = 0;..