Commentaire: Tout le monde sait que tous les navigateurs ne prennent pas actuellement en charge HTML5. Même les navigateurs qui prennent en charge HTML5 peuvent ne pas prendre en charge toutes les nouvelles fonctionnalités de HTML5. Il est recommandé d'utiliser Firefox (favori des développeurs) ou Chrome Browser. Tous mes exemples sont développés sur la base de Firefox.
À partir d'aujourd'hui, nous commencerons une série de cours sur la toile HTML5. Cette série est mon résumé après avoir lu "HTML5 Canvas: Interactivité et animation native pour le Web". Les amis intéressés peuvent télécharger des livres d'anglais originaux à lire. Ce livre nous montre les fonctions puissantes de la toile en introduisant le développement de la toile. Je pense que c'est assez bon. J'ai appris beaucoup de connaissances sur la toile en lisant ce livre. En fait, il n'y a pas beaucoup d'API dans la toile elle-même. La clé est de les apprendre et de les utiliser activement et d'apprendre à créer des résultats incroyables pour la combinaison des API. Et ce livre est votre meilleur choix pour apprendre la toile. Il est dommage qu'il n'ait pas encore de version chinoise. Les amis avec un mauvais anglais ne peuvent qu'attendre.Comme nous le savons tous, tous les navigateurs ne prennent pas actuellement en charge HTML5, et même les navigateurs qui prennent en charge HTML5 ne prennent pas nécessairement en charge toutes les nouvelles fonctionnalités de HTML5. Ainsi, tout le monde devrait choisir un navigateur relativement nouveau comme environnement de débogage. Il est recommandé d'utiliser Firefox (préféré du développeur) ou Chrome Browser. Tous mes exemples sont développés sur la base de Firefox.
Je ne présenterai pas les connaissances de base liées à HTML5 ici. Il existe de nombreux tutoriels sur HTML5 sur Internet, donc je peux l'apprendre par moi-même. Pour apprendre HTML5, vous devez avoir une meilleure base en JavaScript. Vous pouvez aller sur le blog de l'oncle Tom pour apprendre:. En fait, cette série de cours est assez difficile. Si vous étudiez bien plus de 50 articles, vous devez être considéré comme un expert JS.
Maintenant, nous commençons officiellement notre cours sur toile, le premier exemple: Bonjour toile.
Tout d'abord, vous devez ajouter la balise de toile dans le corps, comme suit:
<lebvas>
Votre navigateur ne prend pas en charge le canevas HTML5.
</ canvas>
La partie texte de Canvas sera affichée lorsque le navigateur ne prend pas en charge l'objet Canvas.
La balise Canvas est définie. Lorsque nous devons l'exploiter via JS, il peut être mis en œuvre via GetElementById.
var thecanvas = document.getElementById (canvasone); Nous sommes maintenant habitués à utiliser jQuery pour développer des tâches, alors comment obtenir l'objet Canvas à l'aide de jQuery?
var canvas = $ ('# canvasone'). get (0); ou var canvas = $ ('# canvasone') [0]; Je ne sais pas que cela obtient (0) et [0] ne l'ont pas. Si vous n'utilisez pas la méthode get () ou l'indice [], votre code JS ne pourra pas fonctionner normalement sur le canevas. Parce que $ ('# canvasone') obtient un objet jQuery, et ce que nous voulons réellement fonctionner, c'est un objet HTML DOM. Il y a un problème où l'objet jQuery est converti en objet DOM, et cette conversion est terminée via get () ou indice. Si vous devez convertir un objet DOM en un objet jQuery, vous pouvez utiliser la méthode $ () pour l'implémenter. Mon ami qui n'est pas clair à ce sujet a le seul à aller à Baidu tout seul, donc je n'y entrerai pas en profondeur ici.
Afin d'assurer la robustesse du code, nous devons déterminer si votre navigateur prend en charge les objets Canvas, qui peuvent être implémentés via le code suivant.
if (! thecanvas ||! thecanvas.getContext) {
retour;
}
Cependant, il est recommandé d'utiliser la bibliothèque modernizr.js pour terminer ce travail. Il s'agit d'une bibliothèque HTML5 JS très passive et fournit de nombreuses méthodes utiles.
fonction canvassupport () {
retour modernizr.canvas;
}
Canvas prend en charge le rendu 2D et est implémenté via le code suivant:
var context = thecanvas.getContext (2d);
Ensuite, nous pouvons dessiner l'image sur Canvas via l'objet de contexte.
// Définit la couleur de la zone
context.fillStyle = "#ffffa";
// dessine la zone
context.fillrect (0, 0, 500, 300);
// régler la police
context.font = "20px _sans";
// définir l'alignement vertical
context.textBaseline = "top";
// dessiner du texte
context.fillText ("Hello World!", 195, 80);
// Définir la couleur de la bordure
context.strokestyle = "# 000000";
// dessiner une bordure
context.strokect (5, 5, 490, 290);
Le dessin de l'image est décrit ci-dessous. En raison du téléchargement asynchrone de l'image, afin de vous assurer que lorsque vous dessinez une image avec toile, l'image a été téléchargée, nous utilisons la méthode suivante:
var helloworldImage = new Image ();
helloworldImage.src = "helloworld.gif";
helloworldimage.onload = function () {
Context.Drawimage (HelloworldImage, 160, 130);
}
Une fois l'image terminée, l'événement Onload sera déclenché et l'image sera dessinée à l'aide de l'objet contextuel.
Tout le monde télécharge la démo pour voir le code complet. L'adresse de téléchargement de démonstration: html5canvas.helloworld.zip