Elemento de la lona y IE

Question

_{Pues no sólo IE, cualquier navegador que no admite actualmente que}

Quiero empezar a utilizar el href="http://processingjs.org/" rel="nofollow noreferrer"> Processing.js marco . Se utiliza para la fabricación de imágenes con el elemento canvas. Sin embargo Soy reacio a utilizarlo debido al hecho de que no está apoyada ampliamente.

¿Cuál es la mejor manera para mí dar una imagen alternativa al usuario si no son compatibles con el elemento canvas?

Yo necesitaría algo así como ...

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

¿Hay una manera estandarizada de hacer esto todavía? Si no es así cuál es la mejor cosa que podía hacer?

Answer 1

Cualquier contenido entre las etiquetas <canvas></canvas> se mostrará si no se admite el elemento canvas. Lo que puede probar:

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

Lo lógico que viene a la mente es colocar el código JavaScript que desea ejecutar entre las etiquetas <canvas></canvas>:

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

Pero, por desgracia esto no funciona. Incluso los navegadores que soportan la API de lienzo que se van ejecutar el script.

Así que tal vez lo mejor que puede hacer para comprobar mediante programación que soporta el navegador de la API de canvas es comprobar el método getContext disponible en todos los elementos <canvas></canvas>:

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

Esto crea un lienzo ficticia (a fin de no preocuparse por el acaparamiento de una referencia a uno en el DOM ya) y comprueba si existe la propiedad getContext en el elemento. También comprueba si ExplorerCanvas se ha incluido para IE . No te va a decir exactamente cuáles son las características de la API son compatibles (más allá del conjunto estándar de formas, caminos, etc.).

Un artículo sobre las características de HTML5 característica de detección (como lienzo) se puede encontrar aquí .

Answer 2

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

Answer 3

Sí, en realidad la propiedad útil de HTML es que ignora las etiquetas desconocidas. Así que la siguiente:

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

mostrará el texto de repliegue en el IE.

Answer 4

También puede considerar el uso de una de las bibliotecas de JavaScript que esencialmente crear una etiqueta de tela funciona en IE. Aquí hay uno: http://code.google.com/p/explorercanvas/

Answer 5

Se podría mirar el Modernizr biblioteca para comprobar si hay apoyo a las diversas características que estás en interés .

Answer 6

Canvas funciona en Opera, Chrome, Safari, Firefox, IE6-8 (con excanvas.js, como se mencionó @philfreo).

Processing.js , en particular, funciona en IE, tal como se afirma en la página principal Processing.js:

  

Processing.js funciona en Firefox, Safari,   Opera, Chrome y también trabajará con   Internet Explorer, utilizando el Explorador   Lienzo.

Hay algunos trucos con EI: Es necesario prestar especial atención cuando se crea un lienzo de forma dinámica, no se puede adjuntar a eventos que (directa - se puede conectar a un contenedor div), no se puede conseguir información de píxeles de la tela, y los gradientes radiales no son compatibles. Ah, y que es mucho más lento en el IE, por supuesto.

No creo que ninguna de esas advertencias se aplicarán a usted cuando se trabaja en Processing.js, excepto por supuesto para la lentitud de excanvas.js emulando la lona.