본문 바로가기
글쓰기

canvas3

[JS] 자바스크립트 스와이프 벽돌깨기 게임 만들기 - 1 심심풀이로 하기 좋은 벽돌깨기게임을 만들어보았다 생각나는데로 코드를 짜느라 수정이 많이 필요한 스파게티 코드지만 그건 나중으로 미루고, 여태까지 만든것을 일단 올린다! (오류가 많아서, 앞으로도 계속해서 수정될 예정이다......!) HTML 삽입 미리보기할 수 없는 소스 1. 캔버스 만들기 body 태그 안에 canvas 태그를 삽입해주었다 다음으로, script 태그 안에서 getElementById 함수로 canvas태그에 접근해주고 canvas 태그를 조작하기 위한 getContext 함수를 불러와준다 터치조작을 위해, canvas의 위치값을 알 수 있는 getBoundingClientRect함수도 불러와주었다 Html 코드는 끝이났다! 이제부터는 script 태그 안의 코드만 만들어주면 된다 2.. 2022. 6. 12.
[JS] 자바스크립트 캔버스 그림판 만들기 2 - canvas 자가격리 기념으로 할 일도 없어서 오랜만에 포스팅 2022.02.08 - [개발기록/Javascript] - [JS] 자바스크립트 캔버스 그림판 만들기1 - canvas [JS] 자바스크립트 캔버스 그림판 만들기1 - canvas 먼저, 모질라 캔버스 API 사용법 https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage 캔버스(Canvas) 기본 사용법 - Web API | MDN HTML 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습 spectrum20.tistory.com 지난 포스팅에서 canvas API를 이용해서 자바스크립트 캔버스를 구현해보았다 이번시간에는 좀 더 그림판같은 기능들을 추가해보겠다 모질라.. 2022. 3. 30.
[JS] 자바스크립트 캔버스 그림판 만들기1 - canvas 먼저, 모질라 캔버스 API 사용법 https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage 캔버스(Canvas) 기본 사용법 - Web API | MDN HTML 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를 설정하는 방법을 알게되고, 여러분의 브라우저에서 첫 번째 예제를 그리 developer.mozilla.org 라떼는~ 인터넷으로 플래시게임이라는 것을 많이 했었다 (지금은 유물속으로 사라진 야후꾸러기 같은...ㅜㅜ) 웹에서 이런 플래시게임을 할 수 있었던 것은, 어도비사의 플래시 플레이어 덕분이었다 그러나, 보안 문제로 어도비 플래시에 대한 지원이 점점 사라져.. 2022. 2. 8.
반응형