2012-12-13 5 views
0

현재 문제가 있습니다. html5와 javascript에서 캔버스와 이미지 객체를 사용하여 이미지를 그려야합니다. 캔버스 픽셀과 동일한 크기 인 윈도우 픽셀 을 알고 싶습니다. 예를 들어 cavas (700 * 400)가있는 경우 어떻게 알고 싶습니다. 그것은 창 화면에 필요한 많은 크기. 따라서, 내가 알고 싶은 경우 (1 * 1) window.screen.widht * window.screen.height와 같습니다.캔버스와 창을 비교 한 픽셀

+0

캔버스의 1 픽셀은 CSS의 너비와 높이를 설정하지 않으면 창 픽셀입니다. 이미지 크기를 조절하려면 캔버스와 창 사이의 비율을 가져 와서 크기를 조정하려는 모든 이미지를 곱하면됩니다. – kennypu

+0

O 내가 잘못했을 수도 있습니다 : 예를 들어, 나는 캐비닛 (700 * 400)을 가지고 있는데, 그러면 윈도우 화면에 얼마나 많은 크기가 필요한지 알고 싶습니다. 따라서, 내가 알고 싶다면 (1 * 1) window.screen.widht * window.screen.height와 같은 것입니다. –

답변

0

속성에서 정의한 요소의 실제 크기로 나눕니다. Exemple : http://jsfiddle.net/pjdmN/

var canvas = document.getElementById('canvas'); 
var xRatio = canvas.offsetWidth/canvas.width; 
var yRatio = canvas.offsetHeight/canvas.height; 
0

cavans에 기본 1 x 1 픽셀에 의해 창에 1 픽셀의 같습니다.

이 경우 캔버스는 요소처럼 동작합니다. 자체 너비와 높이가 있지만 CSS를 사용하여 다른 크기로 확장 할 수 있습니다.