2010-07-06 3 views
1

사용 가능한 화면 해상도에 따라 캔버스 요소에 '너비'와 '높이'속성을 설정해야합니다. html로부터 정적으로 설정 (예 : <canvas id="canv" width="1600" ...). Javascript에서 나는 그것을 할 수 없다. 내가 봤 거든 그렇게에서 검색했지만 아무것도 작동하지 찾지 못했습니다. 자바에서 캔버스에 대한 속성 설정에 실패했습니다.

$('#canv').setAttribute('width',screen.availWidth); 
$('#canv').attr('width',screen.availWidth); 
$('#canv').data('width',screen.availWidth); 
$('#canv').width = screen.availWidth; 
$('#canv').css('width',screen.availWidth); 

내가 동일 var cv = $('#canv')[0].getContext("2d");을 넣고 cv로하지만 결과 $('#canv')을 변경 한 내가 jQuery를 사용하고 난 실패 다음 (높이 속성 같은)을 시도했습니다.

BB

화면 크기가 후하는지 경우이 같은 그것을 할 수 있습니다,하지만 난 모르겠어요
+1

** 브라우저 ** 표시 가능 영역 또는 사용자의 ** 화면 ** 크기로 최대화하려고합니까? –

+0

브라우저로 볼 수있는 영역으로 최대화하려고합니다. – gc5

답변

7

code on jsfiddle.net/pUcjV/2 to

$('#canv').attr("width", screen.availWidth);  
$('#canv').attr("height", screen.availHeight); 
circlesBG (cv, col, screen.availWidth, screen.availHeight); 

에서

circlesBG (cv, col, screen.availWidth, screen.availHeight); 
$('#canv').width(screen.availWidth);  
$('#canv').height(screen.availHeight);  

전체 캔버스에 걸쳐 별이 생성되었습니다. 이것이 바람직한 결과입니까? Chrome 5.0.375.99를 사용하고 있습니다.

+0

그것은 작동합니다 :) 나는 그것이 원래 페이지에서도 작동하는지,하지만 나는 이것이 모든 것을 해결한다고 생각합니다. :) 너무 많이 ... 나는 명성이 15 점 미만인 경우에도 이러한 답을 평가하려고 노력할 것입니다. D – gc5

+0

그것은 확실히 작동합니다. 이상한 점 : 당신이 속성으로 만든 캔버스를 비교한다면 html http://jsfiddle.net/pUcjV/7/ js http://jsfiddle.net/pUcjV/8/에 의해 삽입 된 속성으로 만든 마지막 캔버스에 첫 번째 캔버스에는 앤티 엘리 어싱이 있으며, 마지막 캔버스에는 없습니다. \ – gc5

+1

에일 리어 징 제거 기능이 작동합니다. 크기 변경 후 컨텍스트를 검색했습니다 (http://jsfiddle.net/pUcjV/11/). 이것은 Chrome 5.0.375.99에서 다시 나타납니다. – Castrohenge

2

: 나는 변경

$('#canv').width(screen.availWidth);​ 

You can see a demo here

+0

이 절반은 해결했습니다, 감사합니다; http://jsfiddle.net/pUcjV/2/ 데모에서 볼 수 있듯이 이제 영역에 치수가 필요합니다. 그러나 픽셀 당 캔버스 픽셀을 그릴 수는 없습니다 .. 표준 치수로 배경을 그립니다. 그때 그것을 극대화 .. – gc5

+0

또한 HTML 5와 캔버스를 사용하고 있습니다 .. 그냥 생각 .. 어쩌면 그것은 주요 소스에 대한 속성이 필요합니다 .. – gc5

관련 문제