recherche

Maison >interface Web >Tutoriel H5 >HTML5 Canvas introduction à l'apprentissage tutoriel_html5 compétences du didacticiel

HTML5 Canvas introduction à l'apprentissage tutoriel_html5 compétences du didacticiel

WBOY
WBOYoriginal
2016-05-16 15:45:412096parcourir

HTML5

Qu’est-ce que HTML5 exactement ? Dans la FAQ HTML5 du W3C, ceci est indiqué à propos de HTML5 : HTML5 est une licence gratuite développée sous une plateforme ouverte.
Plus précisément, il y a deux interprétations de cette phrase :
«
fait référence à un groupe de technologies qui constituent ensemble la future plateforme de réseau ouvert. Ces technologies incluent les spécifications HTML5, CSS3, SVG, MATHML, Géolocalisation, XmlHttpRequest. , Context 2D, Web Fonts et autres technologies. Les limites de cet ensemble de technologies sont informelles et changent avec le temps
Fait référence à la spécification HTML5 et fait certainement partie de l'Open Web Platform.

"


Prise en charge des navigateurs pour Canvas
Ci-dessous, j'ai répertorié les navigateurs Web les plus populaires et les numéros de version minimum à partir desquels ils ont commencé à prendre en charge l'élément Canvas.


Je recommande d'utiliser Chrome ici.

Page HTML5 simple

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >
  3. <html lang="zh" >
  5. <tête>
  6.  <méta charset="UTF- 8"> 
  7.  <titre>Page HTML5 de base titre>
  8. tête>
  10. <corps> Bonjour Diffusion corps>
  12. html>

Les résultats de la démo en cours d'exécution sont les suivants :
2016317110813836.jpg (850×500)

Le HTML est composé d'éléments de balises en forme de crochets <>. Ces balises apparaissent généralement par paires, et les balises ne peuvent être qu'imbriquées et non croisées.
Extension :
Ce qui apparaît par paires est appelé une balise fermée, et ce qui apparaît seul est appelé une balise unique. Il est fermé quoi qu'il arrive (une seule balise n'a pas besoin d'être fermée, mais la fermeture est strictement requise en XHTML). Les balises de fermeture sont divisées en balises de début et de fin. Par exemple, est une balise de début et Auto-étiquettes telles que
, etc.
Pour plus de tags, il est recommandé de vous renseigner vous-même. Nous recommandons la plateforme W3school pour l'auto-apprentissage.
Ici, nous nous concentrons sur les balises qui apparaissent dans le code ci-dessus.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >

Cette balise indique que le navigateur Web affichera la page en mode standard. Ceci est requis pour les documents HTML5 selon la spécification HTML5 définie par le W3C. Cette balise simplifie les étranges différences de longue date dans la façon dont les différents navigateurs affichent les pages HTML. Il s'agit généralement de la première ligne du document.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <html lang="fr" >

Il s'agit de la balise qui contient la description de la langue, par exemple "en" pour l'anglais et "zh" pour le chinois.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <tête>... tête> 

Ces deux marqueurs indiquent respectivement le début et la fin des informations d'en-tête. Les balises contenues dans l'en-tête sont le titre, la préface, la description et tout autre contenu de la page. Elles ne sont pas affichées en tant que contenu lui-même, mais affectent l'effet d'affichage de la page Web. Les balises les plus couramment utilisées dans les en-têtes sont la balise <title>

Le tableau suivant répertorie toutes les balises et fonctions sous l'élément HTML head :

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <méta charset="UTF-8"> 

Cette balise décrit le mode de codage des caractères utilisé par le navigateur Web, qui est généralement défini ici sur UTF-8. Il n’est pas nécessaire de le modifier si aucun paramètre spécial n’est requis. C'est également un élément obligatoire pour les pages HTML5.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <titre>... titre> 

Cette balise décrit le titre du HTML affiché dans la fenêtre du navigateur. Il s'agit d'une balise importante et l'une des principales informations utilisées par les moteurs de recherche pour indexer le contenu d'une page HTML.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <corps>... corps> 

Le contenu réel affiché sur la page Web est contenu entre ces deux .
Pour résumer, la page Web HTML5 est composée des parties et dans la première ligne, et ;head> et le corps spécifié par .
De cette façon, nous avons compris la structure de base de la page Web HTML la plus simple.

Ajouter un canevas
Ajouter un canevas en HTML est très simple, il suffit d'ajouter la balise dans la partie Vous pouvez vous référer au code ci-dessous.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. ><html lang ="zh"><tête> <méta charset="UTF-8"> ;<titre>Page HTML5 de basetitre > tête>
  2. <corps>
  3.  <toile id="toile" >
  4. Votre navigateur ne prend pas en charge Canvas ? ! Changez-le vite ! !
  5.  toile>corps> 
  6. html>

La page de résultats étant complètement vierge, je ne posterai pas de photo ici. Vous pourriez être curieux, pourquoi est-il vide ? (C'est absurde, je n'ai pas encore eu le temps de dessiner !) La signification originale de Canvas est canvas, ce qui signifie toile (absurdité...) Le canevas est transparent et invisible en HTML5.
Que signifie le texte dans la balise Autrement dit, une fois que le navigateur ne prend pas en charge Canvas lors de l'exécution de la page HTML, ce texte sera affiché. Autrement dit, tant que votre navigateur prend en charge Canvas, ce texte ne sera pas affiché sur la page.
Que signifie l'identifiant dans id est l'un des attributs de la balise. Il est utilisé dans le code JavaScript pour spécifier le nom d'un spécifique, tout comme le numéro d'identification d'une personne, il est unique.
Afin d'afficher le Canvas plus clairement et de faciliter les démonstrations ultérieures, j'ai légèrement modifié le code, et tous les dessins ultérieurs seront dessinés sur ce Canvas.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html lang="zh" >  
  3. <tête>  
  4. <meta charset="UTF- 8">  
  5. <titre>基础的Toile titre>  
  6. tête>  
  7.   
  8. <corps>  
  9. <div id="toile- chaîne">  
  10.     <toile id="toile"  style="bordure : 1px solide #aaaaaa ; affichage : bloc; marge : 50px auto ;" largeur="800" hauteur=" 600">  
  11.     你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  12.     toile>  
  13. div>  
  14. corps>    
  15. html>  

Résultat de l'exécution :
2016317111155702.jpg (850×500)

Quelques notes sur le code ci-dessus :

1. J'ai ajouté la balise

et j'ai enveloppé le
2. Spécifiez les attributs de largeur et de hauteur pour la balise
3. Ajout d'un style en ligne à la balise pour en faire un élément de niveau bloc et l'afficher au centre.

Je n'expliquerai pas ici le contenu du CSS. Après tout, ce n'est pas le protagoniste de ce cours, et il faudra beaucoup d'espace pour le développer.

Élément Canvas de référence


Document Object Model (DOM)
Document Object Model (DOM) est une interface de programmation standard recommandée par l'organisation W3C pour le traitement des langages de balisage extensibles. L'histoire du Document Object Model remonte à la « guerre des navigateurs » entre Microsoft et Netscape à la fin des années 1990. Afin de rivaliser pour la vie ou la mort en JavaScript et JScript, les deux parties ont doté les navigateurs de fonctionnalités puissantes à grande échelle. Microsoft a ajouté de nombreux éléments propriétaires à la technologie Web, notamment VBScript, ActiveX et le format DHTML propre à Microsoft, ce qui empêche de nombreuses pages Web de s'afficher correctement à l'aide de plates-formes et de navigateurs non Microsoft. DOM est le chef-d’œuvre brassé à cette époque.
Le modèle objet de document représente tous les objets d'une page HTML. Il est neutre en termes de langage et de plate-forme. Il permet de mettre à jour à nouveau le contenu et le style de la page après son rendu par le navigateur Web. Les utilisateurs peuvent accéder au DOM via JavaScript.
Avant de commencer à utiliser , vous devez d'abord comprendre deux objets DOM spécifiques : window et document.

L'objet window est le niveau le plus élevé du DOM. Cet objet doit être détecté pour s'assurer que toutes les ressources et le code ont été chargés avant de commencer à utiliser l'application Canvas.
L'objet document contient toutes les balises HTML de la page HTML. Cet objet doit être récupéré pour trouver les instances de manipulées à l'aide de JavaScript.

Emplacement de placement JavaScript
L'utilisation de JavaScript pour programmer Canvas posera un problème : où démarrer le programme JavaScript dans la page créée ?
Mettez JavaScript dans le Une tendance récente consiste à placer JavaScript avant la balise à la fin du document HTML, garantissant ainsi que la page entière est chargée pendant l'exécution de JavaScript. Toutefois, étant donné que vous devez utiliser JavaScript pour tester si la page se charge avant d'exécuter le programme , il est préférable de placer le code JavaScript dans le répertoire <head>.
Cependant, je ne prends pas le chemin habituel (rires), donc dans les cas suivants, je mets toujours le code JavaScript à la fin du selon mon propre style de codage. Bien entendu, s’il y a beaucoup de code JavaScript, il est recommandé de charger des fichiers .js externes. Le code est à peu près le suivant :

Code JavaScriptCopier le contenu dans le presse-papiers

Dans le développement réel d'un projet, HTML, CSS et JS sont complètement séparés. Cependant, le code utilisé pour les démonstrations de cas est légèrement inférieur, de sorte que la plupart d'entre elles n'utilisent pas la méthode de chargement de fichiers .js externes.


Obtenir l'objet canevas
Obtenir l'objet canevas n'est en fait qu'une phrase.

Code JavaScriptCopier le contenu dans le presse-papiers
  1. var canvas = document.getElementById("canvas"
    2. );

Var est utilisé pour la définition des variables. Puisque JS est un langage faiblement typé, var est utilisé pour définir n'importe quelle variable. Le canevas suivant la variable est une variable. Utilisez la méthode getElementById() de l'objet document pour obtenir l'objet par identifiant. Auparavant, nous attribuions à la balise un identifiant nommé canvas, donc le dernier canevas de cette phrase fait référence à l'identifiant de (Est-ce un peu déroutant ? Vous devez le lire plusieurs fois pour comprendre.)
Obtenir un pinceau (environnement 2D)
De quoi avez-vous besoin en premier pour dessiner ? Pinceau. L'obtention du pinceau canevas se résume également à une phrase, qui consiste à utiliser directement l'objet canevas qui vient d'être obtenu et à appeler sa méthode getContext("2d").

Code JavaScriptCopier le contenu dans le presse-papiers
  1. var context = canvas.getContext("2d"
    2. );

Le contexte ici, c'est le pinceau.
Dans d'autres tutoriels, le terme environnement 2D est utilisé, je pense que les pinceaux sont plus vivants. L'inspiration vient du g brush de la classe Graphics en Java, et le principe est le même.


Résumé
Il n'y a que trois étapes de préparation :

1. Disposez le canevas : ajoutez l'élément canevas en ajoutant la balise
2. Obtenez le canevas : obtenez l'objet canevas via l'identifiant de la balise Récupérer le pinceau : via la méthode getContext("2d") de l'objet canevas pour obtenir l'environnement 2D
Le code correspondant pour

est composé de trois phrases :

Code JavaScriptCopier le contenu dans le presse-papiers
  2. var canvas = document.getElementById("canvas");
  3. var context = canvas.getContext("2d" );
Le code complet est le suivant.


Code JavaScript
Copier le contenu dans le presse-papiers
  2. "zh">
    4. "UTF-8"> Toile de base
    8. "toile-warp"
  8. > "canvas"
    9. style=
  9. "border: 1px solid #aaaaaa; display: block; margin: 50px auto ;" width="800" height="600"> Votre navigateur ne prend pas en charge Canvas ? ! Changez-le vite ! !
    • <script>
    • window.onload =
  • fonction
    • (){
  • var
    • canvas = document.getElementById(
  • "canvas" ); var
    • context = canvas.getContext(
  • "2d" ); }
    • Quelques points à noter :
    1.Le code JavaScript doit être enveloppé dans des balises <script>

    2016317111405657.png (1433×771)2.window.onload = function(){} sera exécuté immédiatement après le chargement de la page, ce qui signifie que le contenu du corps de la fonction après le chargement et l'exécution de la page.

    À ce stade, la toile et le pinceau ont été préparés. Ensuite, utilisons le pinceau (objet contextuel) pour dessiner des images haute définition ! Réveillez-vous! L'âme d'un artiste !

    Déclaration：
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Article précédent：Exemple de dessin au trait de base HTML5 Canvas tutoriel_html5 compétences du didacticielArticle suivant：Exemple de dessin au trait de base HTML5 Canvas tutoriel_html5 compétences du didacticiel

    Articles Liés

    Voir plus