YUDA't

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
canvas rotate 후 axis 조정  (0) 2018.02.19
우분투에서 HeidiSQL 사용하기  (0) 2018.01.17
api 문서화, 좋은 예시  (0) 2017.10.31
ubuntu16에서 Pycharm, Webstorm 설치하기  (0) 2017.08.23