이번에는 배경이미지 위에 마우스가 있는 지점에만 이미지가 떠다니도록 구현해보려 한다. Step 1. 마우스가 있는 point에만 그림이 있도록 코드 수정하기(잔상 없애기) 저번 게시물에서 offset을 활용하여 마우스가 있는 지점마다 이미지가 보이도록 구현했었다. 이번에는 마우스가 있는 그 지점에만 이미지가 있도록 해야하므로 이전 게시물의 코드를 보완해야한다. 우선, 이전 게시물의 코드는 다음과 같다. 이전 코드 canvas.addEventListener("mousemove",function(e){ context.drawImage(kimImg,e.offsetX-50,e.offsetY-50,100,100); }); 다음 코드의 결과는 아래와 같다. 보완을 위한 중요한 생각 point는, 위의 코드는 mou..
다음 게시물에서 DragonFlight라는 슈팅게임을 구현해보려 한다. 따라서, DragonFlight 구현에 필요한 canvas 사용법에 대해 알아보려 한다. Step1. 캔버스 생성하기, 도구 준비하기 canvas 생성에는 태그를 사용한다. context는 그림을 그릴 수 있는 도구로, context의 참조값도 얻어온다. 중요한 점은, context와 canvas는 서로 독립적이라는 것이다. Step2. 선 스타일 지정하기 Step3. 선 그리기 stroke를 꼭 해주어야 한다. stroke를 하지 않으면 캔버스에 아무것도 표시되지 않는다. Step4. 이미지 삽입하기 new Image()는 힙 영역에 이미지 객체를 생성한다. onload를 사용하는 이유는, 페이지 로딩 시점에 이미지가 로딩되어 있지..
- Total
- Today
- Yesterday
- jsp
- html
- bootstrap
- 백준
- 파이썬
- 큐
- python
- 고득점 키트
- baekjoon
- 자바스크립트
- 단계별로풀어보기
- Java
- append
- 덱
- 정렬
- Case When
- 스프링
- jQuery
- 브루트 포스
- R
- Oracle
- Django
- 자바
- CSS
- brute force
- javascript
- 프로그래머스
- web
- 문자열
- 장고
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |