HTML5 Canvas : Comment tester si le navigateur prend en charge les compétences du didacticiel Canvas_html5

Cet article est traduit de Steve Fulton et Jeff Fulton HTML5 Canvas, chapitre 1, « Tests pour voir si le navigateur prend en charge Canvas ».

Après avoir obtenu la référence à l'élément Canvas sur la page HTML, nous devons tester si l'élément contient du « contexte ». Le contexte d'un Canvas fait référence au plan défini par le navigateur pour le dessin. En termes simples, si le contexte n'existe pas, Canvas n'existe que par son nom. Il existe plusieurs façons de tester si un navigateur prend en charge Canvas. La première méthode consiste à vérifier si la méthode getContext de l'élément Canvas dans la page HTML existe :

Copiez le code

Le code est le suivant :

if (!theCanvas || !theCanvas.getContext) {
return;
}

En fait, ce qui précède le code teste deux points : un, teste si theCanvas est faux (si l'identifiant n'existe pas, document.getElementById() renverra false, deuxièmement, teste si la fonction getContext() existe) ;

Dans le code ci-dessus, si le test échoue, alors l'instruction return est exécutée et le programme se termine.

Une autre méthode consiste à créer une fonction spécifiquement utilisée pour déterminer si Canvas est pris en charge, et dans cette fonction, un élément Canvas est généré en temps réel pour effectuer cette détermination - cette méthode est très populaire, Mark Pilgrim dans sa solution HTML5. est mentionné sur le site http://diveintohtml5.org :

Copiez le code

Le code est le suivant :

function canvasSupport() {
return !!document.createElement('canvas').getContext;
}
function canvasApp() {
if (!canvasSupport( )) {
return;
}
}

Notre méthode préférée consiste à utiliser la bibliothèque modernizr.js (trouvée sur http://www.modernizr.com). Modernizr est une bibliothèque JavaScript légère, simple et facile à utiliser, permettant de tester la compatibilité de diverses technologies Web. Elle fournit de nombreuses méthodes booléennes statiques qui peuvent être utilisées pour tester si le Canvas actuel est pris en charge.

Introduire modernizr dans la page HTML est très simple, téléchargez le code depuis http://www.modernizr.com, puis incluez ce fichier js externe dans la page HTML :

Copiez le code

Le code est le suivant :

• Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes
• Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)
• Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9
• Expressions régulières et nouveaux éléments HTML5
• Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur