Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- FPS
- Python
- lambda
- coursera
- Project Euler
- C#
- flask
- 스팀
- 파이썬
- pycon
- certbot
- 프로젝트오일러
- 게임
- 블라디보스토크
- 몽골여행
- 퍼즐게임
- 우분투
- 워킹데드
- 그래픽노블
- 중국맛집
- 컴퓨터네트워크
- API
- 인디게임
- 알고리즘
- AWS
- codility
- 먹방
- github
- django
- https
- Today
- 134
- Total
- 324,498
YUDA't
canvas rotate 후 axis 조정 본문
canvas를 rotate하거나 transform 하면 x축, y축도 돌아가 버린다.
뭐 그냥 보여주기만 할 거라면 축이 어디든 상관 없지만,
캔버스에 그림을 그리거나 할 때는 축을 다시 맞춰줄 필요가 있다.
이거 때문에 엄청 삽질함..
그냥
let canvas = $('#canvas'+idx)[0]; let ctx = canvas.getContext("2d"); ... ctx.transform(0, 1, -1, 0, height, 0); ctx.drawImage(bgImg, 0, 0, width, height); ctx.setTransform(1, 0, 0, 1, 0, 0)
이렇게 transform> drawImage 과정을 거친 뒤, ctx.setTransform(1, 0, 0, 1, 0, 0); 해주면 끝!
스택오버플로우 답변을 참고했다.
'개발 > 아카이브' 카테고리의 다른 글
웹페이지 최적화 (0) | 2018.07.16 |
---|---|
webstorm에서 javascript/CSS minify 적용 (0) | 2018.07.16 |
우분투에서 HeidiSQL 사용하기 (0) | 2018.01.17 |
api 문서화, 좋은 예시 (0) | 2017.10.31 |
ubuntu16에서 Pycharm, Webstorm 설치하기 (0) | 2017.08.23 |
- Tag
- Canvas, ctx, SetTransform, transform
0 Comments