DiveIntoHTML5 Canvas afirma que IE9 admite el lienzo.

Sin embargo, cuando intenté hacer canvas en IE9, no funciona:

El objeto no admite la propiedad o el método 'getContext'

Estoy usando IE9.0.8112.16421:

enter image description here

Este es el código:

<html>
<head>

</head>
<body style="background:black;margin:0;padding:0;">
<canvas id="canvas" style="background:white;width:100%;height:100%;">noob</canvas>
<script>
var img=new Image();
img.onload=function(){
  var c=document.getElementById('canvas');
  var ctx = c.getContext('2d');
  var left,top;
  left=top=0;
  ctx.drawImage(img,left,top,20,20);
  var f=function(){
    left+=1;
    top+=1;
    c.width=c.width;
    ctx.drawImage(img,left,top,20,20);
  };
  setInterval(f,20);
};
img.src="http://a.wearehugh.com/dih5/aoc-h.png";
</script>
</body>
</html>
25
Pacerier 30 may. 2011 a las 09:40

6 respuestas

La mejor respuesta

Dos cosas:

La etiqueta <canvas> debe tener una etiqueta de cierre correspondiente </canvas>. Mientras que algunos navegadores le permitirán sobrevivir con solo una etiqueta de apertura, otros (como Firefox y quizás IE) no lo harán.

Además, IE9 requiere que declares un doctype HTML5 para usar la etiqueta del lienzo. Puede hacerlo colocando <!DOCTYPE html> en la parte superior de su código.

52
Jeff 30 may. 2011 a las 08:44

Si IE9 se ejecuta en modo de compatibilidad, la etiqueta del lienzo no se reconocerá, incluso si está utilizando la etiqueta HTML5 DOCTYPE. Al menos esa ha sido mi experiencia.

Verifique si IE9 se está ejecutando en modo de compatibilidad, que puede ser el caso si el sitio está en una intranet.

14
Mike Strother 19 mar. 2012 a las 20:04

¡Chicos!

Echa un vistazo a Explorer Canvas en Google Code: https://code.google.com/p/explorercanvas/

¡Espero que esto ayude!

Tze

0
TzeMan 22 may. 2014 a las 19:08

Ejecutando IE 9.0.8112.16421. El elemento Canvas no funcionará inicialmente, pero si presiono F12 para abrir devtools, luego actualizar, comienza a funcionar. La actualización normal sin la ventana de devtools abierta no funcionará. Puede ser un problema de JS init ya que el lienzo estaba funcionando antes de que moviera el código de dibujo del lienzo a su propio archivo .js. Funciona bien en Chrome / Firefox / Safari.

1
Ray 5 ago. 2012 a las 08:46

Cuando use IE10 en la vista de compatibilidad, verifique la versión de compatibilidad de IE. Ingrese F12 (herramientas de desarrollador abiertas) y verifique la versión de IE (por ejemplo, IE9) que necesita probar y el navegador funcionará justo debajo de esta versión.

1
Karen 5 feb. 2013 a las 12:11

<!DOCTYPE html> debe ser lo primero en su página. Tenía un script antes de la etiqueta y me seguía dando el mismo error. Esto solo ocurre en IE9, Chrome y Firefox funcionan incluso con un script antes de la etiqueta doctype.

6
Tadiotto 1 mar. 2012 a las 18:50