<Emanvas> est un nouvel élément HTML qui peut être utilisé par le langage de script (généralement JavaScript) pour dessiner des graphiques. Par exemple, il peut être utilisé pour dessiner des images, synthétiser des images ou faire des animations simples (et pas si simples). L'image à droite montre quelques exemples d'application de <Canvas>, et nous verrons leur implémentation dans ce tutoriel.
<Emanvas> a d'abord été introduit sur le tableau de bord Mac OS X d'Apple, puis appliqué à Safari. Les navigateurs basés sur Gecko1.8, tels que Firefox 1.5, prennent également en charge ce nouvel élément. L'élément <Canvas> fait partie de Whatwg Web Applications 1.0, qui est connu de tout le monde, la spécification standard HTML 5.
Dans ce didacticiel, je vais essayer de vous dire comment utiliser l'élément <Canvas> de votre propre page Web. Les exemples fournis devraient vous donner des concepts clairs, à savoir ce que vous pouvez faire avec <Canvas>. Ces exemples peuvent également servir de point de départ pour votre application <Canvas>.
Avant de commencer à utiliser
L'utilisation de l'élément <Canvas> n'est pas difficile, tant que vous avez les connaissances de base de HTML et JavaScript.
Comme mentionné ci-dessus, tous les navigateurs modernes ne prennent pas en charge les éléments <Canvas>, vous avez donc besoin de Firefox 1.5 ou version ultérieure, ou d'autres navigateurs à base de gecko tels que Opera 9, ou une version récente de Safari pour voir tous les actions de tous les exemples.
élément <canvas>
Commençons ce tutoriel en regardant l'élément <ayevas> lui-même.
Commençons par la définition de l'élément <Canvas>.
<Canvas ID = Tutorial Width = 150 Hight = 150> </ Canvas>
Cela ressemble beaucoup à l'élément <Mg>, la seule différence est qu'il n'a pas les attributs SRC et ALT. <Canvas> ressemble beaucoup au <MG>, la seule différence est qu'il n'a pas les attributs SRC et ALT. L'élément <Canvas> n'a que deux attributs - largeur et hauteur . Ceux-ci sont à la fois facultatifs et peuvent également être définis à l'aide de propriétés DOM ou de règles CSS. En cas de spécification des attributs de largeur et de hauteur, la toile sera initialement de 300 pixels de large et 150 pixels de haut . L'élément peut être dimensionné arbitrairement par CSS, mais pendant le rendu, l'image est mise à l'échelle pour s'adapter à sa taille de disposition. (Si vos rendus semblent déformés, essayez de spécifier explicitement vos attributs de largeur et de hauteur dans les attributs <Canvas>, et non avec CSS.) Bien que la taille de la canevas puisse être redimensionnée via CSS, l'image de rendu évoluera pour vous adapter à la mise en page (si vous constatez que les résultats de rendu sont déformés, vous n'avez pas à ralentir sur CSS, vous pouvez essayer de expliciter la hauteur et la hauteur de la hauteur sur CSS, vous pouvez essayer l'explicite de la hauteur et de la hauteur de la hauteur sur CSS, vous pouvez essayer de les expliciter, vous n'avez pas de hauteur et de ralentissement sur CSS, vous pouvez essayer d'expliciter la plus grande implification de la hauteur et de ralentir sur CSS, vous pouvez essayer d'expliciter la plus grande implification de la hauteur et de ralentisse Valeurs d'attribut de la toile).
L'attribut ID n'est pas spécifique à l'élément <lebvas> mais est l'un des attributs HTML par défaut qui peuvent être appliqués à (presque) chaque élément HTML (comme la classe par exemple). C'est toujours une bonne idée de fournir un ID car cela facilite l'identification dans notre script.
L'attribut ID n'est pas exclusif à <Canvas>. Tout comme la balise HTML standard, tout élément HTML peut spécifier sa valeur d'ID. Généralement, c'est une bonne idée de spécifier un ID pour un élément, ce qui facilite l'application dans les scripts.
L'élément <Canvas> peut être stylé comme n'importe quelle image normale (marge, bordure, arrière-plan, etc.). Ces règles n'affectent cependant pas le dessin réel sur la toile. Nous verrons comment cela se fait plus tard dans ce tutoriel. Lorsqu'aucune règle de style n'est appliquée à la toile, elle sera initialement entièrement transparente. L'élément <Canvas> peut être stylé comme n'importe quelle image normale (marge, bordure, arrière-plan, etc.). Ces règles n'affectent cependant pas le dessin réel sur la toile. Nous verrons comment cela se fait plus tard dans ce tutoriel. Lorsqu'aucune règle de style n'est appliquée à la toile, elle sera initialement entièrement transparente. L'élément <Canvas> peut être stylé comme toute image normale (marge, bordure, arrière-plan, etc.) est comme s'il s'agissait d'une image normale. Cependant, ces styles n'ont aucun effet sur l'image réelle générée par toile. Ci-dessous, nous verrons comment appliquer des styles. Si vous ne spécifiez pas de style, Canvas est complètement transparent par défaut.
Étant donné que l'élément <Canvas> est encore relativement nouveau et n'est pas implémenté dans certains navigateurs (tels que Firefox 1.0 et Internet Explorer), nous avons besoin d'un moyen de fournir du contenu de secours lorsqu'un navigateur ne prend pas en charge l'élément.
Étant donné que <Canvas> est relativement nouveau, certains navigateurs ne l'implémentent pas, tels que Firefox 1.0 et Internet Explorer, nous devons fournir un contenu d'affichage alternatif pour les navigateurs qui ne prennent pas en charge Canvas.
Heureusement, c'est très simple: nous fournissons simplement un contenu alternatif à l'intérieur de l'élément de toile. Les navigateurs qui ne le soutiennent pas ignoreront complètement l'élément et rendront le contenu de secours, d'autres rendront normalement la toile normalement.
Par exemple, nous pourrions fournir une description de texte du contenu Canvas ou fournir une image statique du contenu rendu dynamiquement. Cela peut ressembler à ceci:
Nous avons juste besoin d'insérer un contenu de substitution directement dans l'élément de toile. Les navigateurs qui ne prennent pas en charge le canevas ignoreront les éléments du canevas et rendront directement le contenu alternatif, tandis que les navigateurs pris en charge rendront normalement la toile. Par exemple, nous pouvons remplir un texte ou des images en toile comme contenu alternatif:
<Canvas ID = StockGraph Width = 150 Hight = 150> Prix actuel de l'action: 3,15 $ +0,15 </ canvas> <Canvas ID = Clock Width = 150 Hight = 150> <img src = images / horloge.png width = 150 height = 150 /> </ canvas>
Dans l'implémentation d'Apple Safari, <Canvas> est un élément implémenté de la même manière que <Mg> est; il n'a pas de balise de fin. Cependant, pour que <Canvas> ait une utilisation généralisée sur le Web, une installation de contenu de secours doit être fournie. Par conséquent, la mise en œuvre de Mozilla nécessite une balise finale (</ canvas>).
Dans Apple Safari, la mise en œuvre de <Canvas> est très similaire à <MG>, et il n'a pas de balise finale. Cependant, pour que <Aletvas> soit largement applicable dans le monde du Web, il est nécessaire de fournir une place pour un contenu alternatif, donc la fin de la balise (</aponvas>) dans la mise en œuvre de Mozilla est nécessaire.
Si le contenu de secours n'est pas nécessaire, un simple <canvas id = foo ...> </ canvas> sera entièrement compatible avec Safari et Mozilla - Safari ignorera simplement la balise de fin.
S'il n'y a pas de substitut, <canvas id = foo ...> </ canvas> est entièrement compatible avec Safari et Mozilla - Safari ignore simplement la balise d'extrémité.
Si le contenu de secours est souhaité, certaines astuces CSS doivent être utilisées pour masquer le contenu de secours de Safari (qui devrait rendre uniquement la toile), et aussi pour masquer les astuces CSS elles-mêmes de IE (ce qui devrait rendre le contenu de secours).
S'il y a un contenu alternatif, vous pouvez utiliser certaines astuces CSS pour masquer un contenu alternatif et uniquement pour Safari, car ces contenus alternatifs doivent être affichés dans IE mais pas dans Safari.
<Canvas> Crée une surface de dessin de taille fixe qui expose un ou plusieurs contextes de rendu , qui sont utilisés pour créer et manipuler le contenu illustré. Nous nous concentrerons sur le contexte de rendu 2D, qui est le seul contexte de rendu actuellement défini. À l'avenir, d'autres contextes peuvent fournir différents types de rendu; Par exemple, il est probable qu'un contexte 3D basé sur des ouverts sera ajouté.
L'écran de dessin de taille fixe créé par <Canvas> ouvre un ou plusieurs contextes de rendu , à travers lesquels nous pouvons contrôler ce qu'il faut afficher. Nous nous concentrons sur le rendu 2D, qui est également la seule option à l'heure actuelle, et pouvons ajouter un contexte 3D basé sur les ouvertures à l'avenir.
Le <Canvas> est initialement vide, et pour afficher quelque chose, un script a d'abord besoin pour accéder au contexte de rendu et en tirer dessus. L'élément Canvas a une méthode DOM appelée getContext, utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. getContext () prend un paramètre, le type de contexte.
L'initialisation de <Canvas> est vide. Pour dessiner un script dessus, il nécessite d'abord son contexte de rendu. Il peut être obtenu via la méthode GetContext de l'objet élément canvas. Dans le même temps, certaines fonctions sont obtenues pour le dessin. getContext () accepte une valeur qui décrit son type comme un argument.
var canvas = document.getElementById ('tutoriel'); var ctx = canvas.getContext ('2d');Dans la première ligne, nous récupérons le nœud Dom Canvas à l'aide de la méthode GetElementById. Nous pouvons ensuite accéder au contexte de dessin à l'aide de la méthode GetContext.
La première ligne ci-dessus obtient le nœud Dom de l'objet Canvas via la méthode GetElementByid. Ensuite, le contexte de l'opération de dessin est obtenu via sa méthode GetContext.
Le contenu de secours est affiché dans les navigateurs qui ne prennent pas en charge <Canvas>; Les scripts peuvent également vérifier l'assistance lors de leur exécution. Cela peut facilement être fait en testant la méthode GetContext. Notre extrait de code d'en haut devient quelque chose comme ceci:
En plus d'afficher un contenu alternatif sur des navigateurs non pris en charge, vous pouvez également vérifier si le navigateur prend en charge le canevas via des scripts. La méthode est très simple, jugez simplement si le GetContext existe.
var canvas = document.getElementById ('tutoriel'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); // Code de dessin ici} else {// canvas-unsupporté code ici}Voici un modèle minimaliste, que nous utiliserons comme point de départ pour des exemples ultérieurs. Vous pouvez télécharger ce fichier pour travailler sur votre système.
Nous commencerons par le modèle de code le plus simple suivant (requis pour les exemples ultérieurs), et vous pouvez télécharger le fichier à utiliser localement.
<html> <éad- head> <itle> tutoriel canvas </ title> <script type = text / javascript> function draw () {var canvas = document.getElementById ('tutoriel'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); }} </ script> <style type = text / css> canvas {border: 1px solide noir; } </ style> </ head> <body onload = draw ();> <canvas id = tutoriel width = 150 height = 150> </ canvas> </ body> </html>Si vous regardez le script, vous verrez que j'ai fait une fonction appelée Draw, qui sera exécutée une fois que la page aura terminé le chargement (via l'attribut Onload sur la balise corporelle). Cette fonction aurait également pu être appelée à partir d'un Settimeout, SetInterval ou de toute autre fonction de gestionnaire d'événements aussi longtemps que la page a été chargée en premier.
Si vous êtes prudent, vous constaterez que j'ai préparé une fonction appelée Draw, qui sera exécutée une fois la page chargée (en définissant la propriété Onload de la balise corporelle), et bien sûr, il peut également être appelé dans Settimeout, SetInterval ou d'autres fonctions de traitement des événements.
Pour commencer, voici un exemple simple qui attire deux rectangles qui se croisent, dont l'un a une transparence alpha. Nous explorerons comment cela fonctionne plus en détail dans des exemples ultérieurs.
Pour commencer, jetons un look simple - dessinez deux rectangles entrelacés, dont l'un a un effet transparent alpha. Nous vous donnerons un aperçu détaillé de la façon dont cela fonctionne dans l'exemple suivant.
<html> <éad- head> <script type = application / x-javascript> function draw () {var canvas = document.getElementById (canvas); if (canvas.getContext) {var ctx = canvas.getContext (2d); CTX.FillStyle = RGB (200,0,0); CTX.Fillrect (10, 10, 55, 50); CTX.FillStyle = RGBA (0, 0, 200, 0,5); CTX.Fillrect (30, 30, 55, 50); }} </ script> </ head> <body onload = draw ();> <canvas id = canvas width = 150 height = 150> </ Canvas> </ body> </html>