2012-05-03 2 views
3

이것은 매우 실망 스럽습니다. 캔버스의 높이와 너비를 설정하지 않으면 캔버스가 잘 자릅니다. 그러나 높이와 너비를 설정하면 검정 상자가 나타납니다. 나는 나의 코드를 미친 정도까지 버리고 어떤 문제도 찾을 수 없다. 캔버스 태그는 FF와 IE9에서 잘 작동합니다.캔버스 태그는 크롬에 검은 색 블록을 생성합니다.

var canvas = document.getElementById('can1'); 
var ctx = canvas.getContext('2d'); 

canvas.width = 280; 
canvas.height = 270; 

ctx.clearRect(0, 0, canvas.width, canvas.height); 

심지어 이것은 Google 크롬에서 캔버스를 파괴합니다. 아무리 작아도 높이 또는 너비가 설정되면 실패합니다. 대신 CSS를 사용하여 높이 또는 너비를 설정하면 왜곡 된 결과가 발생합니다.

아이디어가 있으십니까?

업데이트 : 내 캔버스가 충분히 작 으면 크롬에서 작동한다는 것을 발견했습니다. 그러나 저는 캔버스가 필요합니다. 280x270은 100x100이 아닙니다.

+0

코드에 배경색이 적용되지 않습니다. 예를 보여주는 페이지를 제공 할 수 있습니까? 내 테스트에서 배경색이 보이지 않았습니다. 모자가 전부라면 검은 배경에 또 다른 이유가 있습니다. 캔버스의 배경을 설정하는 CSS 규칙이 있는데 아마도 눈치 채지 못했을 것이라고 상상할 수 있습니다. Chrome 개발자 도구를 사용하여 확인하셨습니까? – YMMD

+0

있습니다. 배경색을 설정하는 규칙은 없습니다. 여기서 예상되는 동작은 아무 것도없는 투명한 요소입니다. FF와 ie9에서 얻는 것입니다. – Fresheyeball

+1

OK, 배경색 (CSS로 설정)이있는 jsfiddle을 설정합니다. http://jsfiddle.net/2dfyw/1/ Chrome 18.0을 실행 중이므로 잘 보입니다. –

답변

0

가능한 해결책! 모든 애니메이션의 경우 RequestAnimationFrame을 사용합니다. 내 프로젝트 중 하나에서 일했습니다!