2013-01-18 5 views
2

HTML5를 읽거나 실험하기 시작했습니다. 나는 HTML5 캔버스 본 적이 모든 튜토리얼은 자바 스크립트의 패턴 ID로 캔버스를 받고 2D 컨텍스트를 얻고, 다음 상황에 맞는 작업을 수행합니다HTML5 캔버스 컨텍스트

<canvas id="myCanvas" width="300" height="200" style="border:1px solid"></canvas> 
<script> 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.fillStyle="cyan"; 
    ctx.fillRect(50,50,100,75); 
</script> 

이 열거, 경우, 또는 궁금 해서요 Canvas를위한 Context를 얻기위한 상수.

뭔가 등 Context.2D, Context.3D, (그 같은 자바 스크립트 또는 HTML5 어딘가에있을 경우 난 그냥 궁금이 실제 일정하지) 알고있다.

내가 본 모든 사례에서 만들어진 호출은 단순히 getContext("2d")입니다. 이것은 부서지기 쉬운 것처럼 보이며, 다른 문맥이 있다면 사용할 수 있는지도 알려주지 않습니다.

+2

지금은 '2d' 또는'webgl'라고 생각합니다. – paul

+0

@paul은 webgl에 대해 알려 주셔서 감사합니다 ... 나는 그것이 전달 될 수있는 문자열 중 하나라는 것을 몰랐습니다. 나는 그것이 '3d'라고 가정했다. –

답변

6

getContext을 한 번만 호출하고 다시 호출하면 캔버스가 이미 다른 컨텍스트 유형으로 초기화 된 경우 null을 반환합니다. 동일한 컨텍스트 유형으로 다시 호출하면 동일한 컨텍스트를 반환합니다. 캔버스가 지정된 컨텍스트 ID 문자열을 지원하지 않는 경우에도 Null이 반환됩니다.

즉, 각 캔버스에는 하나의 컨텍스트 만 있습니다.

다른 문맥이있는 경우 알려주지 않습니다.

supportsContext(someContextString)입니다.이 방법은 아직 모든 브라우저에서 구현되지 않은 spec (2012 년 3 월)에 매우 새로운 방법입니다.

아직 어떤 브라우저에서도 지원되지 않는 setContext이 있습니다 (몇 야조에 포함될 수 있음). setContext은 headless 컨텍스트를 만든 경우에만 유용합니다. 다른 컨텍스트를 설정하려고하면 이미 컨텍스트가있는 캔버스 (getContext 사용)가 오류를 발생시키기 때문입니다.

어쨌든 인수가 문자열 인 이유는 브라우저에 특정한 캔버스 확장을 허용하기 위해서입니다. 결국 MS는 getContext('2d-directx')을 구현하려고 할 수 있습니다.

최근에 볼 수있는 문자열은 "2d", "webgl""webgl-experimental"입니다.

+0

대단히 유익한 답변입니다. 훌륭한 정보를 모두 공유해 주셔서 감사합니다. 'supportsContext' 메소드 또는 아직 지원되지 않는 setContext에 대해 들어 본 적이 없습니다. –