캔버스 요소와 IE

Question

_{그럼 그냥 IE, 현재 그}

나는 processing.js 프레임 워크를 사용하여 시작하려는를 지원하지 않는 브라우저. 이것은 캔버스 요소로 이미지를 만드는 데 사용됩니다. 그러나 널리 사용되지 않기 때문에 사용하기를 꺼립니다.

캔버스 요소를 지원하지 않으면 사용자에게 대체 이미지를 제공하는 가장 좋은 방법은 무엇입니까?

내가 좋아하는 뭔가를해야 할 것 ...

if(!canvas){ 
    element.style.backgroundColor = 'red'; 
} 

아직이 일을 표준화 된 방법이 있나요? 만약 내가 할 수있는 최선의 일이 아니라면?

Answer 1

캔버스 요소가 지원되지 않는 경우 <canvas></canvas> 태그 사이의 모든 콘텐츠가 표시됩니다. 그래서 당신은 시도 할 수 있습니다 :

<canvas> 
    <script> 
    document.getElementById('element').style.backgroundColor = 'red'; 
    </script> 
</canvas> 

그러나 슬프게도

이 작동하지 않습니다

<canvas><img src="alt-image-for-old-browsers.png" /></canvas> 

마음에 오는 논리적 것은 당신이 <canvas></canvas> 태그 사이에 실행할 자바 스크립트를 배치하는 것입니다. Canvas API를 지원하는 브라우저조차도 스크립트를 실행할 것입니다.

그래서 아마도 당신이 프로그래밍 방식으로 브라우저가 캔버스 API를 지원하는지 확인하기 위해 할 수있는 최선의 것은 모두 <canvas></canvas> 요소에 사용할 수있는 getContext 방법을 확인하는 것입니다 : 그래서에 관해서는 더미 캔버스 (생성

function supportsCanvasAPI() { 
    var canvas = document.createElement('canvas'); 
    if (window.G_vmlCanvasManager) { // IE ExplorerCanvas lib included? 
    G_vmlCanvasManager.initElement(canvas); 
    } 
    return 'getContext' in canvas 
} 

이미 DOM에서 하나에 대한 참조를 잡는 것에 대해 걱정하지 않아야 함) 요소에 getContext 속성이 있는지 확인합니다. 또한 ExplorerCanvas has been included for IE인지 확인합니다. API의 어떤 기능이 지원되는지 정확히 알려주지는 못합니다 (표준 모양, 경로 등).

기능 감지 HTML5 기능 (예 : 캔버스)에 대한 도움말은 here입니다.

Answer 2

예, 사실 HTML의 유용한 속성은 알 수없는 태그를 무시한다는 것입니다. 따라서 다음과 같습니다.

<canvas> This text is shown to IE users </canvas> 

IE에 대체 텍스트가 표시됩니다.

Answer 3

if (typeof HTMLCanvasElement === 'undefined') { 
    // redirect to another page, or whatever you want 
} 

Answer 4

IE에서 작업 캔버스 태그를 기본적으로 만드는 JavaScript 라이브러리 중 하나를 사용하는 것도 좋습니다. 여기에 하나는 다음과 같습니다 http://code.google.com/p/explorercanvas/

Answer 5

캔버스 오페라, 크롬, 사파리, 파이어 폭스, IE6-8에 작업 (excanvas.js와, @philfreo가 언급 한 바와 같이). Processing.js 홈페이지에 명시된대로

Processing.js, 특히, IE에서 작동합니까 :

처리합니다.js는 FireFox, Safari, Opera, Chrome에서 실행되며 Internet Explorer에서 Explorer 캔버스를 사용하여 작동합니다.

IE와 몇 가지 트릭이 있습니다. 캔버스를 동적으로 만들 때 특별한주의를 기울여야합니다. 이벤트를 첨부 할 수 없습니다 (직접 - 컨테이너 div에 연결할 수 있음). 캔버스에서 픽셀 정보를 얻지 못합니다. 방사형 그래디언트는 지원되지 않습니다. 아, 물론 IE에서는 훨씬 느립니다.

나는 캔버스를 에뮬레이션하는 excanvas.js의 속도가 느린 것을 제외하고는 processing.js에서 작업 할 때 이러한 경고가 적용되지 않을 것이라고 생각합니다.

Answer 6

당신은 당신이 관심있는 다양한 기능에 대한 지원을 확인하기 위해 Modernizr library 볼 수 있었다.