canvasScaleRatio관련 문의

Question

안녕하세요! 항상 수업 잘 듣고 있습니다. canvasScaleRatio 계산 설명 중 궁금한 점이 있어 문의드립니다. height에 딱 맞춰 계산한다고 하셨는데, 만약 브라우저창의 가로 너비가 더 길고 세로 길이가 더 짧아서 그 안의 캔버스의 가로 너비가 더 짧고, 세로 길이가 더 긴상태라면(즉, 캔버스보다 브라우저 창이 납작한 경우) widthRatio 가 canvasScaleRatio가 되기때문에 해당 값으로 scale조절이 된다면 캔버스가 화면 너비에는 꽉차게 되지만 height또한 더 길어지게 되어 height값이 화면과는 동일하지 않게 됩니다(화면보다 캔버스 세로 길이가 더 길어서 넘어가게됨) 그런데 영상 설명에서는 계속 height값을 꽉 맞추기 위해서라고 설명하시는데 이같은 경우는 height값이 화면가 동일하지 않습니다. 결론: 브라우저 창이 홀쭉하든 납작하든 heightRatio로 계산하는게 맞지 않나요?? case 3 : // 가로/세로 모두 꽉 차게 하기 위해 여기서 세팅(계산 필요) const widthRatio = window . innerWidth / objs . canvas . width ; const heightRatio = window . innerHeight / objs . canvas . height ; let canvasScaleRatio ; if (widthRatio <= heightRatio) { // 캔보스보다 브라우저 창이 홀쭉한 경우 canvasScaleRatio = heightRatio ; } else { // 캔버스보다 브라우저 창이 납작한 경우 canvasScaleRatio = widthRatio ; } objs . canvas . style . transform = ` scale( ${ canvasScaleRatio } ) ` ; // objs.context.drawImage(objs.images[0], 0, 0); // // 캔버스 사이즈에 맞춰 가정한 innerWidth와 innerHeight // const recalculatedInnerWidth = window.innerWidth / canvasScaleRatio; // const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio; // console.log(recalculatedInnerWidth, recalculatedInnerHeight); // const whiteRectWidth = recalculatedInnerWidth * 0.15; break ;

1분코딩 · Answer

네 말씀대로 이미지 비율에 따라 어느 부분을 꽉 채울거냐에 따라, 의도에 맞는 방법으로 진행하시면 될 것 같습니다~ 정해진게 아니니까요. 이미지 생긴거에 따라서도 위아래가 잘리는게 자연스러운지, 좌우가 잘리는게 자연스러운지도 달라질 것 같아요^^ 강의에서는 애플 웹페이지에서 맞추는 방식으로 최대한 비슷하게 한거라고 보시면 될 것 같습니다.