Maison > Article > interface Web > Apprendre HTML5 en jouant (1) - Explication détaillée de Canvas
width="750">
L'effet d'affichage du code
navigateur IE
, vous ne pourrez peut-être que voir Un conseil : si vous utilisez Google Chrome ouvar canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d');Firefox
, vous pouvez voir une zone en forme de carré rouge.
2. Contexte de rendu
En fait, on ne peut rien faire juste avec la balise
var canvas = document.getElementById('tutorial'); if (canvas.getContext){ alert("支持 <canvas> 标签"); } else { alert("不支持 <canvas> 标签");Obtenir le contexte est très simple. Vous n'avez besoin que des deux lignes de code suivantes : Récupérez d'abord l'objet canevas, puis appelez la méthode getContext du canevas. objet. Cette méthode ne peut être transmise que dans le paramètre "2d", dans un avenir proche, il pourra prendre en charge le paramètre "3d", vous devez comprendre ce que cela signifie, attendons-le avec impatience. La méthode getContext renvoie un objet CanvasRenderingContext2D, qui est l'objet de contexte de rendu. Vous pouvez trouver plus d'informations à ce sujet ici, qui sont quelques méthodes de dessin. 3. Prise en charge du navigateur En plus d'afficher du contenu alternatif sur les navigateurs non pris en charge, nous pouvons également utiliser des scripts pour vérifier si le navigateur prend en charge le canevas. , la méthode est très simple. Il suffit de déterminer si la fonction getContext existe. Le code est le suivant : .
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!