현재 문제가 있습니다. html5와 javascript에서 캔버스와 이미지 객체를 사용하여 이미지를 그려야합니다. 캔버스 픽셀과 동일한 크기 인 윈도우 픽셀 을 알고 싶습니다. 예를 들어 cavas (700 * 400)가있는 경우 어떻게 알고 싶습니다. 그것은 창 화면에 필요한 많은 크기. 따라서, 내가 알고 싶은 경우 (1 * 1) window.screen.widht * window.screen.height와 같습니다.캔버스와 창을 비교 한 픽셀
0
A
답변
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를 사용하여 다른 크기로 확장 할 수 있습니다.
관련 문제
- 1. html5의 캔버스와 완벽한 픽셀 충돌 문제
- 2. MonoTouch 코어 그래픽 ... Android 캔버스와 비교
- 3. 픽셀 차트 비교
- 4. 캔버스와 자바 스크립트를 사용하여 이미지의 픽셀 색상을 읽으십시오.
- 5. 캔버스와 플로트
- 6. 픽셀 단위로 픽셀 당 두 비트 맵 객체의 빠른 비교
- 7. 캔버스와 시뮬레이터에서보기가 다릅니다.
- 8. 캔버스와 Z- 인덱스
- 9. 픽셀 AS3 픽셀의 비트 맵 데이터 비교
- 10. 캔버스와 스타일이있는 어린이
- 11. 캔버스와 클릭 핸들러 (GWT)
- 12. 캔버스와 레이아웃을 결합 하시겠습니까?
- 13. 캔버스와 CSS3 요소 혼합하기
- 14. 캔버스와 같은 요소
- 15. HTML 캔버스와 CSS
- 16. 캔버스와 요소를 함께 스케일링
- 17. 캔버스와 J2ME의 LWUIT
- 18. IE9에서 한 픽셀 씩만 깜박임
- 19. 입력 한 값의 비교
- 20. jquery로로드 한 문자열 비교
- 21. 을 비교 한 여기
- 22. 성능을 비교 한
- 23. 포인터을 비교 한 문제
- 24. 한 모금 비교
- 25. 비디오가있는 함수에서 캔버스와 Drawimage 사용하기
- 26. 캔버스와 여러 줄로 텍스트 그리기
- 27. 캔버스와 비트 맵의 관계는 무엇입니까?
- 28. 실버 캔버스와 사각형의 마우스 이벤트
- 29. 설정된 픽셀 여백을 기준으로 이미지 크기 조정 창을 사용 하시겠습니까?
- 30. Boost.Bind에서 반환 한 개체 비교?
캔버스의 1 픽셀은 CSS의 너비와 높이를 설정하지 않으면 창 픽셀입니다. 이미지 크기를 조절하려면 캔버스와 창 사이의 비율을 가져 와서 크기를 조정하려는 모든 이미지를 곱하면됩니다. – kennypu
O 내가 잘못했을 수도 있습니다 : 예를 들어, 나는 캐비닛 (700 * 400)을 가지고 있는데, 그러면 윈도우 화면에 얼마나 많은 크기가 필요한지 알고 싶습니다. 따라서, 내가 알고 싶다면 (1 * 1) window.screen.widht * window.screen.height와 같은 것입니다. –