Commentaire: Qu'est-ce que Canvas <Canvas> est un nouvel élément HTML défini dans HTML5. Cet élément peut généralement être utilisé pour dessiner des graphiques, synthétiser des images, etc. dans des pages HTML via JavaScript, et peut également être utilisé pour faire des animations. Bien sûr, actuellement HTML5
Qu'est-ce que la toile
<Emanvas> est un nouvel élément HTML défini dans HTML5. Cet élément peut généralement être utilisé pour dessiner des graphiques, synthétiser des images, etc. dans des pages HTML via JavaScript, et peut également être utilisé pour faire des animations. Bien sûr, la spécification HTML5 est toujours en phase de projet, et cela peut prendre jusqu'en 2010 pour être officiellement publié, mais maintenant de nombreux navigateurs ont déjà pris en charge certaines spécifications HTML5. Actuellement, les navigateurs qui prennent en charge les éléments Canvas incluent Firefox3 +, Safari4, Chrome 2.0+, etc., donc lors de l'exécution des exemples sur cette page, assurez-vous que vous utilisez l'un des navigateurs ci-dessus.
Bien que j'ai eu beaucoup de tutoriels sur toile à Mozilla, j'ai décidé d'enregistrer mon processus d'apprentissage. Si vous pensez que je ne comprends pas assez, vous pouvez trouver un lien vers le didacticiel Canvas sur le site Web de Mozilla dans les documents de référence.
De plus, des exemples de toile intéressants peuvent être trouvés ici.
Commencez avec la toile
L'utilisation de toile est simple. Tout comme l'utilisation d'autres éléments HTML, il vous suffit d'ajouter une balise <lebvas> à la page:
<lebvas> </ canvas>
Bien sûr, ce n'est qu'une simple création d'un objet en toile et ne fait aucune opération dessus. Pour le moment, l'élément Canvas ne semble pas différent de l'élément div, et rien ne peut être vu sur la page :)
De plus, la taille de l'élément Canvas peut être spécifiée par les attributs de largeur et de hauteur, ce qui est quelque peu similaire à l'élément IMG.
Core de toile: contexte
Comme mentionné précédemment, vous pouvez utiliser des objets Canvas via JavaScript pour dessiner des graphiques, des images de synthèse, etc. En d'autres termes, dans le processus d'utilisation de l'objet Canvas, nous traitons le contexte de l'objet Canvas, et l'objet Canvas lui-même peut être utilisé pour obtenir des informations telles que la taille de l'objet Canvas.
Il est très simple d'obtenir le contexte de l'objet Canvas. Appelez simplement la méthode GetContext de l'élément Canvas. Lorsque vous appelez, vous devez passer un paramètre de type de contexte. La seule valeur de type qui peut être utilisée et peut être utilisée est 2D:
Embarras de Firefox3.0.x
Bien que Firefox3.0.x prend en charge les éléments de toile, il n'est pas entièrement implémenté en fonction de la spécification. Les méthodes FillText et MeasureText dans la spécification sont remplacées par plusieurs méthodes spécifiques à Firefox dans Firefox3.0.x. Par conséquent, lorsque vous utilisez Canvas dans Firefox3.0.x, vous devez d'abord corriger les différences entre ces méthodes dans différents navigateurs.
Le code suivant est tiré du projet Mozillabespin, qui corrige l'incohérence entre l'objet de contexte de Canvas dans Firefox3.0.x et la spécification HTML5:
Remarque: Jusqu'à l'opéra 9.5, l'opéra ne prend pas en charge le FillText de l'objet Canvas et ses méthodes et propriétés connexes dans la spécification HTML5.
Bonjour, toile!
Après une compréhension préliminaire de la toile, nous avons commencé à écrire notre premier programme de toile, une autre branche du célèbre Helloworld Hello, Canvas:
Exécutez l'exemple, la zone où se trouve l'objet Canvas montre Hello, World!, Qui est exactement la fonction de CTX.FillText (Hello, World!, 20,20); dans le code.
FillText et propriétés connexes
La méthode FillText est utilisée pour afficher le texte dans Canvas. Il peut accepter quatre paramètres, le dernier est facultatif:
voidFillText (IndoMStringText, infloatx, infloaty, [facultatif] infloatMaxWidth);
Où maxwidth représente la largeur maximale lors de l'affichage du texte, ce qui peut empêcher le texte de déborder. Cependant, dans mes tests, j'ai constaté que la maxaignée n'est pas efficace lors de la spécification de maxaigrité dans Firefox et Chomre.
Avant d'utiliser la méthode FillText, vous pouvez ajuster la police du texte en définissant la propriété de la police du contexte. Dans l'exemple ci-dessus, j'ai utilisé 20ptarial comme police du texte. Vous pouvez vous définir différentes valeurs pour voir l'effet spécifique.
Finition
C'est tout pour l'instant. J'écrirai cette série tout en lisant les spécifications :)
Références
1. Canvas HTML5, une nouvelle étape pour le langage de script, Hred
2
3. Chinois canvastural, Mozilla
4.Canvastuorial anglais, Mozilla
5.CanvassupportinOpera, opéra