web-dev-qa-db-fra.com

Pourquoi mon IE9 ne prend-il pas en charge le canevas?

DiveIntoHTML5 Canvas affirme qu'IE9 prend en charge le canevas.

Cependant, lorsque j'ai essayé de faire du canevas sur IE9, cela ne fonctionne pas:

L'objet ne prend pas en charge la propriété ou la méthode 'getContext'

J'utilise IE9.0.8112.16421:

enter image description here

Voici le code:

<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>
javascriptcanvasinternet-explorer-9
25
Pacerier

Deux choses:

Le <canvas> la balise doit avoir une balise de fermeture correspondante </canvas>. Alors que certains navigateurs vous permettront de vous débrouiller avec juste une balise d'ouverture, d'autres (comme Firefox, et peut-être IE) ne le feront pas.

De plus, IE9 vous oblige à déclarer un doctype HTML5 pour utiliser la balise canvas. Vous pouvez le faire en plaçant <!DOCTYPE html> en haut de votre code.

52
Jeff

Si IE9 s'exécute en mode de compatibilité, la balise canvas ne sera pas reconnue, même si vous utilisez la balise HTML5 DOCTYPE. C'est du moins mon expérience.

Vérifiez si IE9 fonctionne en mode de compatibilité, ce qui peut être le cas si le site est sur un intranet.

14
Mike Strother

<!DOCTYPE html> doit être la première chose sur votre page. J'avais un script avant le tag et ça me donnait toujours la même erreur. Cela ne se produit que dans IE9, Chrome et Firefox fonctionnent même avec un script avant la balise doctype.

6
Tadiotto

lorsque vous utilisez IE10 dans la vue de compatibilité, veuillez vérifier IE version de compatibilité. Entrez F12 (ouvrir les outils de développement) et vérifiez la version appropriée IE (par exemple IE9)) dont vous avez besoin de tester et le navigateur fonctionnera directement sous cette version.

1
Karen

Exécution de IE 9.0.8112.16421. L'élément Canvas ne fonctionnera pas initialement, mais si j'appuie sur F12 pour afficher devtools, puis actualiser, il commence à fonctionner. Actualisation normale sans fenêtre devtools ouverte ne fonctionnera pas peut être un problème d'initialisation JS car le canevas fonctionnait avant de déplacer le code de dessin du canevas dans son propre fichier .js. Fonctionne très bien dans Chrome/Firefox/Safari.

1
Ray

les mecs!

Découvrez Explorer Canvas sur Google Code: https://code.google.com/p/explorercanvas/

J'espère que cela t'aides!

Tze

0
TzeMan