캔버스에서 확대/축소하고 "전체 화면"문제를 처리하는 방법은 무엇입니까?

Question

캔버스가 css height = 100 % http://clec.twbbs.org/Screenshot.png 인 이미지와 정확히 겹치도록하고 싶습니다. 그러나 확대하거나 축소하거나 "전체 화면"을 누르면 캔버스가 이미지 http://clec.twbbs.org/Screenshot-2.png의 크기와 일치하지 않습니다. 이 문제를 어떻게 해결할 수 있는지 궁금합니다.

덕분에 나는 이미지와 캔버스 태그 래퍼를 추가 제안 소스를 보지 않고

Answer 1

많은.

<div id='wrapper'> 
    <img/> 
    <canvas/> 
</div> 

그러면 canvas 요소가 래퍼 경계를 넘어 확장되지 않습니다.

또 다른 방법은 이벤트를 window.resize에 바인딩하고 canvas 요소를 이미지 요소의 너비/높이와 같게 만드는 것입니다.