Commentaire: HTML5 présente une nouvelle étiquette, et la zone représentée par cette étiquette est comme une toile. Tous vos dessins graphiques doivent être présentés sur cette toile à la fin. Avec cette balise, l'expressivité graphique du navigateur a été considérablement améliorée. Flash et Silverlight se sentent-ils menacés?
1.HTML5 introduit une nouvelle balise <lebvas>, la zone représentée par cette balise est comme une toile, et tous vos dessins graphiques doivent être présentés sur cette toile à la fin. Avec cette balise, l'expressivité graphique du navigateur a été considérablement améliorée. Flash et Silverlight se sentent-ils menacés?
Lien d'information: Google affirme que le navigateur Chrome 7 accélérera 60 fois plus rapidement
L'utilisation de la balise <Canvas> est très simple, comme suit:
<lebvas>
Votre navigateur ne prend pas en charge la balise Canvas
</ canvas>
Il n'y a pas de grande différence entre la balise <lebvas> et la balise HTML ordinaire. Vous pouvez définir sa largeur et sa hauteur, et vous pouvez définir sa couleur d'arrière-plan, son style de bordure, etc. via CSS.
Vous pouvez en savoir plus sur la balise <lebvas> ici.
Le contenu au milieu de la balise est le contenu de remplacement. Si le navigateur de l'utilisateur ne prend pas en charge la balise <lebvas>, le contenu sera affiché; Si le navigateur de l'utilisateur prend en charge la balise <lebvas>, le contenu sera ignoré.
Le code <canvas> ci-dessus affiche l'effet suivant:
Votre navigateur ne prend pas en charge la balise Canvas
Si vous utilisez IE Browser, vous ne pouvez voir qu'une invite; Si vous utilisez Google Chrome ou le navigateur Firefox, vous pouvez voir une zone de la place rouge.
2. Rendre le contexte
En fait, nous ne pouvons rien faire avec la balise <lebvas>. Les élèves qui ont joué à la programmation Windows savent que dans le dessin sous Windows, vous devez d'abord obtenir un contexte de périphérique DC, et lorsque vous dessinez la balise <ayevas>, vous devez également obtenir un contexte de rendu. Nos graphiques ne sont pas dessinés directement sur l'écran, mais sur le contexte (contexte) d'abord, puis actualiser à l'écran.
Hors sujet: Pourquoi avez-vous besoin de mettre en place un concept avec un contexte aussi complexe? En raison de l'objet de contexte, nous pouvons faire en sorte que divers appareils graphiques se ressemblent à nos yeux. Nous avons seulement besoin de nous concentrer sur le dessin et de laisser le système d'exploitation et le navigateur s'inquiéter des autres tâches. Pour le dire franchement, transformez toutes sortes de béton en abstractions unifiées, réduisant ainsi notre fardeau.
Obtenir le contexte est très simple, vous n'avez besoin que de deux lignes de code comme suit:
var canvas = document.getElementById ('tutoriel');
var ctx = canvas.getContext ('2d');
Tout d'abord, obtenez l'objet Canvas, puis appelez la méthode GetContext de l'objet Canvas. Cette méthode ne peut passer que dans le paramètre 2D à l'heure actuelle. Dans un avenir proche, il peut prendre en charge le paramètre 3D. Vous devez comprendre ce que cela signifie, attendons-nous avec impatience.
La méthode GetContext renvoie un objet CanvasRenderingContext2d, c'est-à-dire l'objet de contexte de rendu. Vous pouvez en savoir plus ici, qui sont tous des méthodes de dessin.
3. Prise en charge du navigateur
En plus d'afficher un contenu alternatif sur ces navigateurs non pris en charge, nous pouvons également vérifier si le navigateur prend en charge le canevas via des scripts. La méthode est très simple. Jugez simplement si la fonction GetContext existe. Le code est le suivant:
var canvas = document.getElementById ('tutoriel');
if (canvas.getContext) {
alert ("support <lebvas> balise");
} autre {
alert ("non pris en charge <canvas> balise");
}
4. Un petit exemple
Ci-dessous, un exemple de déménagement des lignes de haut en bas sera démontré à l'aide de la fonction de dessin de HTML5. Le code spécifique sera donné dans le contenu ultérieur.
Votre navigateur ne prend pas en charge la balise <lebvas>, veuillez utiliser Chrome ou Firefox Browser