html5 canvas-1.canvas introduction (bonjour canvas)_html5 compétences du didacticiel

À partir d’aujourd’hui, nous commencerons une série de cours sur le canevas HTML5. Cette série est mon résumé après avoir lu "HTML5 Canvas : Native Interactivity and Animation for the Web". Les amis intéressés peuvent télécharger le livre original en anglais et le lire. Ce livre nous montre les fonctions puissantes de Canvas en introduisant la méthode de développement de jeux Canvas. Je pense que c'est plutôt bien. J'ai beaucoup appris sur Canvas en lisant ce livre. En fait, Canvas lui-même ne dispose pas de beaucoup d'API. La clé est de les apprendre et de les utiliser de manière flexible, et d'apprendre à utiliser la combinaison d'API pour créer des effets incroyables. Ce livre est votre meilleur choix pour apprendre le canevas. Malheureusement, il n'a pas encore de version chinoise. Les amis qui ne sont pas bons en anglais devront attendre.

Comme nous le savons tous, tous les navigateurs ne prennent actuellement pas en charge HTML5. Même les navigateurs prenant en charge HTML5 peuvent ne pas prendre en charge toutes les nouvelles fonctionnalités de HTML5. Par conséquent, vous devez choisir un navigateur relativement nouveau comme environnement de débogage. Il est recommandé d'utiliser Firefox (le favori des développeurs) ou le navigateur Chrome. Tous mes exemples sont développés sur la base de Firefox.

Les connaissances de base liées au html5 ne seront pas présentées ici. Il existe de nombreux tutoriels sur le html5 sur Internet, alors apprenez-le par vous-même. Apprendre le HTML5 nécessite que chacun ait de bonnes bases en JavaScript. Vous pouvez aller sur le blog d'Oncle Tom pour apprendre : http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html. En fait, sa série de cours est assez difficile. Si vous apprenez la cinquantaine de chapitres, vous devriez être considéré comme un expert en js.
Maintenant, nous commençons officiellement notre cours de toile, le premier exemple : "bonjour toile".
Vous devez d'abord ajouter la balise canvas dans le corps, comme suit :

Copier le code

Codez comme suit :

Votre navigateur ne prend pas en charge HTML5 Canvas

La partie texte dans le canevas sera affichée lorsque le navigateur ne prend pas en charge l'objet canevas.
définit la balise canvas Lorsque nous devons l'utiliser via js, nous pouvons le faire 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 canevas en utilisant jquery ?
var canvas = $('#canvasOne').get(0); ou var canvas = $('#canvasOne')[0]; Je ne sais pas si vous avez remarqué que get(0) et [ 0] ne sont pas là. Si vous n'utilisez pas la méthode get() ou l'indice [], votre code js ne pourra pas faire fonctionner le canevas normalement. Parce que $('#canvasOne') obtient un objet jquery et que ce que nous voulons réellement utiliser est un objet dom html. Il y a un problème de conversion d'un objet jquery en objet dom. Cette conversion s'effectue via get() ou un indice. Si vous devez convertir un objet dom en objet jquery, vous pouvez utiliser la méthode $(). Ceux qui ne le savent pas ne peuvent se rendre à Baidu que par leurs propres moyens, je n'entrerai donc pas dans les détails ici.
Pour la robustesse du code, nous devons déterminer si votre navigateur prend en charge l'objet canevas, ce qui peut être réalisé grâce au code suivant.

Copier le code

Le code est le suivant :

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

Cependant, il est recommandé d'utiliser la bibliothèque modernizr.js pour terminer ce travail. qui fournit de nombreuses méthodes utiles

Copier le code

Le code est le suivant :

function canvasSupport () {
return Modernizr.canvas
}

canvas prend en charge le rendu 2D, qui est obtenu grâce au code suivant :
var context = theCanvas.getContext("2d");
Nous pouvons maintenant dessiner des images sur le canevas via l'objet contextuel.

Copier le code

Le code est le suivant :

//Définir la couleur de la zone
context .fillStyle = "#ffffaa";
//Zone de dessin
context.fillRect(0, 0, 500, 300
//Définir 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 la bordure
context.StrokeRect(5, 5, 490, 290);
Ce qui suit présente comment dessiner des images. En raison du téléchargement asynchrone des images, afin de garantir que lorsque vous utilisez Canvas pour dessiner une image, l'image a été téléchargée, nous utilisons la méthode suivante :

Copier le code

Le code est le suivant :

var helloWorldImage = new Image(); 🎜>helloWorldImage.onload = function ( ) {
context.drawImage(helloWorldImage, 160, 130);
}


Lorsque l'image est terminée, l'événement onload sera déclenché, et l'objet contextuel sera utilisé pour dessiner l'image.

Téléchargez la démo pour voir le code complet, adresse de téléchargement de la démo :
html5canvas.helloworld.zip