Toile HTML5, un tutoriel pour les débutants

La spécification HTML5 présente de nombreuses nouvelles fonctionnalités, l'une des plus excitantes est l'élément Canvas. HTML 5 Canvas fournit un moyen de dessiner des graphiques via JavaScript, ce qui est simple à utiliser mais puissant. Chaque élément de canevas a un contexte (contexte) (considérez comme une page sur une planche à dessin) où n'importe quelle forme peut être dessinée. Le navigateur prend en charge plusieurs contextes de toile et fournit des capacités de dessin graphique via différentes API. La plupart des navigateurs prennent en charge les contextes 2D Canvas - y compris l'opéra, Firefox, Konqueror et Safari. De plus, certaines versions de l'opéra prennent également en charge la toile 3D, et Firefox peut également prendre en charge la toile 3D via des plug-ins.

Cet article présente les bases de la toile 2D et comment utiliser les fonctions de base de la toile telles que les lignes, les formes, les images et le texte. Pour comprendre cet article, vous comprendrez mieux les bases de JavaScript.

Vous pouvez cliquer ici pour télécharger l'exemple de code dans cet article en lots

Bases sur toile:

La méthode pour créer Canvas est simple, il vous suffit d'ajouter l'élément <lebvas> à la page HTML:

<Canvas ID = MyCanvas Width = 300 Height = 150>

Contenu de secours, au cas où le navigateur ne prend pas en charge le canevas.

</ canvas>

Afin de référencer les éléments en JavaScript, il est préférable de définir l'ID d'élément; Vous devez également régler la hauteur et la largeur de la toile.

Une fois la toile créée, préparons le pinceau. Pour dessiner un graphique dans une toile, vous devez utiliser JavaScript. Trouvez d'abord l'élément Canvas via la fonction GetElementById, puis initialisez le contexte. Divers graphismes peuvent ensuite être dessinés à l'aide de l'API de contexte. Le script suivant dessine un rectangle en toile (cliquez ici pour afficher l'effet):

// Obtenez une référence à l'élément.

var elem = document.getElementById ('myCanvas');

// Vérifiez toujours les propriétés et les méthodes, pour vous assurer que votre code ne se casse pas

// dans d'autres navigateurs.

if (elem && elem.getContext) {

// Obtenez le contexte 2D.

// N'oubliez pas: vous ne pouvez initialiser qu'un seul contexte par élément.

var context = elem.getContext ('2d');

if (context) {

// Vous avez terminé! Vous pouvez maintenant dessiner votre premier rectangle.

// Vous n'avez qu'à fournir les coordonnées (x, y), suivie de la largeur et

// Dimensions de hauteur.

context.fillrect (0, 0, 150, 100);

}

}

Vous pouvez placer le code ci-dessus dans la partie principale du document ou dans un fichier externe.

API de contexte 2D:

Après avoir introduit comment créer une toile, jetons un coup d'œil à l'API 2D Canvas pour voir ce qui peut être fait avec ces fonctions.

Lignes de base:

L'exemple ci-dessus montre à quel point il est facile de dessiner un rectangle.

Les propriétés de remplissage et de strokestyle peuvent être facilement réglées pour le remplissage et les lignes du rectangle. La valeur de couleur est utilisée de la même manière que CSS: numéro hexadécimal, rgb (), rgba () et hsla. Fillrect peut être utilisé pour dessiner un rectangle avec Fillrect. Utilisez Strokect pour dessiner des rectangles avec seulement des bordures et pas de remplissage. Si vous souhaitez effacer une toile, vous pouvez utiliser ClearRect. Les paramètres des trois méthodes ci-dessus sont les mêmes: x, y, largeur, hauteur. Les deux premiers paramètres définissent les coordonnées (x, y) et les deux derniers paramètres définissent la hauteur et la largeur du rectangle. Vous pouvez utiliser la propriété Linewidth pour modifier l'épaisseur de la ligne. Examinons les exemples en utilisant FillRect, Strokect ClearRect et autres:

context.fillStyle = '# 00f'; // bleu

context.strokestyle = '# f00'; // rouge

context.linewidth = 4;

// dessine quelques rectangles.

context.fillrect (0, 0, 150, 50);

context.strokect (0, 60, 150, 50);

context.clearrect (30, 25, 90, 60);

context.strokect (30, 25, 90, 60);

Cet exemple de rendu est illustré dans la figure suivante:

chemin:

Les formes arbitraires peuvent être dessinées via le chemin de toile (chemin). Vous pouvez d'abord dessiner le contour, puis dessiner la bordure et remplir. La création d'une forme personnalisée est simple, commencez à dessiner avec BeginPath (), puis dessinez votre silhouette avec des lignes droites, des courbes et d'autres graphiques. Après le dessin, appelez le remplissage et caresse pour ajouter un remplissage ou régler les bordures. Appelez RsallePath () pour mettre fin à un dessin graphique personnalisé. Voici un exemple de dessin d'un triangle:

// Définissez les propriétés de style.

context.fillStyle = '# 00f';

context.strokestyle = '# f00';

context.linewidth = 4;

context.beginPath ();

// commence à partir du point supérieur à gauche.

context.moveto (10, 10); // donne les coordonnées (x, y)

context.lineto (100, 10);

context.lineto (10, 100);

context.lineto (10, 10);

// Fait! Maintenant, remplissez la forme et dessinez la course.

// Remarque: votre forme ne sera pas visible avant d'appeler l'une des deux méthodes.

context.fill ();

context.stroke ();

context.closepath ();

Les rendus sont illustrés dans la figure suivante:

Un autre exemple plus complexe utilise des lignes droites, des courbes et des arcs.

Insérer l'image:

La méthode DrawImage permet d'insérer d'autres images (éléments IMG et Canvas) dans Canvas. Dans Opera, vous pouvez dessiner des graphiques SVG en toile. Cette méthode est plus compliquée et peut avoir des paramètres 3, 5 ou 9

3 Paramètres: la méthode la plus élémentaire d'utilisation de DrawImage. Un paramètre spécifie la position de l'image et les deux autres paramètres spécifie la position de l'image dans le canevas.

5 Paramètres: Méthode d'utilisation du dessin intermédiaire, y compris les 3 paramètres mentionnés ci-dessus, ajoutez deux paramètres pour indiquer la largeur et la hauteur de l'image d'insertion (si vous souhaitez modifier la taille de l'image).

9 Paramètres: Le dessin le plus complexe est une méthode d'utilisation mixte, y compris les 5 paramètres ci-dessus, et les 4 autres paramètres définissent la position de position et de hauteur dans l'image source. Ces paramètres vous permettent de recadrer dynamiquement l'image source avant de l'afficher.

Voici trois exemples des méthodes d'utilisation ci-dessus:

// trois arguments: l'élément, la destination (x, y) coordonne.

context.DrawImage (IMG_ELEM, DX, DY);

// cinq arguments: les coordonnées de l'élément, de la destination (x, y) et de la destination

// Largeur et hauteur (si vous souhaitez redimensionner l'image source).

context.DrawImage (IMG_ELEM, DX, DY, DW, DH);

// neuf arguments: l'élément, les coordonnées de l'élément, de la source (x, y), de la largeur de la source et

// Hauteur (pour la culture), la destination (x, y) Coordonnées et la largeur de destination

// et hauteur (redimensionner).

context.Drawimage (IMG_ELEM, SX, SY, SW, SH, DX, DY, DW, DH);

L'effet est illustré dans la figure ci-dessous:

Fonctionnement au niveau des pixels:

L'API de contexte 2D fournit trois méthodes pour les opérations au niveau des pixels: CreateImagedata, getImagedata et Putimagedata. L'objet imagedata enregistre la valeur des pixels de l'image. Chaque objet a trois propriétés: largeur, hauteur et données. Le type d'attribut de données est canvaspixelArray, qui est utilisé pour stocker la largeur * hauteur * des valeurs de 4 pixels. Chaque pixel a une valeur RVB et une valeur alpha de transparence (ses valeurs sont de 0 à 255, y compris alpha!). L'ordre des pixels est stocké de gauche à droite, de haut en bas, par rangée. Pour mieux comprendre son principe, regardons un exemple - dessinez un rectangle rouge:

// Créez un objet imagedata.

var imgd = context.createImagedata (50,50);

var pix = imgd.data;

// boucle sur chaque pixel et définissez un rouge transparent.

pour (var i = 0; n = pix.length, i <n; i + = 4) {

pix [i] = 255; // canal rouge

pix [i + 3] = 127; // canal alpha

}

// Dessinez l'objet imagedata aux coordonnées (x, y) données.

context.putImagedata (IMGD, 0,0);

Remarque: Tous les navigateurs n'implémentent pas CreateImagedata. Dans les navigateurs pris en charge, l'objet imagedata doit être obtenu via la méthode getImagedata. Veuillez vous référer à l'exemple de code.

Imagedata peut être utilisé pour remplir de nombreuses fonctions. Par exemple, les filtres d'image peuvent être mis en œuvre ou des visualisations mathématiques peuvent être implémentées (comme les fractales et autres effets spéciaux). Les effets spéciaux suivants mettent en œuvre un filtre d'inversion de couleur simple:

// Obtenez le canvaspixelArray à partir des coordonnées et dimensions données.

var imgd = context.getImagedata (x, y, largeur, hauteur);

var pix = imgd.data;

// boucle sur chaque pixel et inverser la couleur.

pour (var i = 0, n = pix.length; i <n; i + = 4) {

pix [i] = 255 - pix [i]; // rouge

pix [i + 1] = 255 - pix [i + 1]; // vert

pix [i + 2] = 255 - pix [i + 2]; // bleu

// i + 3 est alpha (le quatrième élément)

}

// Dessinez les coordonnées IMagedata aux coordonnées (x, y).

context.putImagedata (imgd, x, y);

La figure suivante montre l'effet après avoir utilisé ce filtre:

Mot:

Bien que la récente version WebKit et la construction nocturne de Firefox 3.1 aient tout juste commencé à prendre en charge l'API texte, afin d'assurer l'intégrité de l'article, j'ai décidé de présenter toujours l'API texte ici.

Les propriétés de texte suivantes peuvent être définies dans l'objet de contexte:

FONT: Police texte, identique à l'attribut CSSFont-Family

Textalign: Alignement horizontal du texte. Valeurs d'attribut souhaitables: Démarrer, fin, gauche, droite, centre. Valeur par défaut: Démarrez.

TextBaseline: Alignement vertical du texte. Valeurs d'attribut souhaitables: haut, suspension, milieu, alphabétique, idois, fond. Valeur par défaut: alphabétique

Il existe deux façons de dessiner du texte: FillText et StrokeText. Le premier dessine du texte avec remplissage de remplissage, ce dernier dessine du texte avec seulement la bordure du strokestyle. Les paramètres des deux sont les mêmes: le texte à dessiner et les coordonnées de position (x, y) du texte. Il existe également une option facultative - largeur maximale. Si nécessaire, le navigateur réduit le texte pour s'adapter à la largeur spécifiée. L'attribut d'alignement du texte affecte la position relative du texte aux coordonnées SET (x, y).

Voici un exemple de dessin Hello World Text in toivas:

context.fillStyle = '# 00f';

context.font = 'italic 30px sans-serif';

context.textBaseline = 'top';

context.fillText («Hello World!», 0, 0);

context.font = 'Bold 30px Sans-Serif';

context.strokeText («Hello World!», 0, 50);

L'image suivante est son rendu:

ombre:

Actuellement, seuls Konqueror et Firefox 3.1 Build Nightly Build Supportent l'API Shadows. Les propriétés de l'API sont:

ShadowColor: Couleur de l'ombre. Sa valeur est cohérente avec la valeur de couleur CSS.

Shadowblur: définit le degré de flou d'ombre. Plus cette valeur est grande, plus l'ombre est grande. Son effet est le même que le filtre flou gaussien de Photoshop.

ShadowOffsetx et ShadowOffsety: les décalages X et Y de l'ombre, en pixels.

Voici un exemple de l'ombre en toile:

context.shadowoffsetx = 5;

context.shadowoffsety = 5;

context.shadowblur = 4;

context.shadowcolor = 'rgba (255, 0, 0, 0,5)';

context.fillStyle = '# 00f';

context.fillrect (20, 20, 150, 100);

L'effet est illustré dans la figure ci-dessous:

Gradient de couleur:

En plus des couleurs CSS, les propriétés de remplissage et de strokestyle peuvent être réglées sur des objets en canevasgradient. -Les gradients de couleur peuvent être utilisés pour les lignes et les remplissages via le Canvasgradient. Pour créer un objet Canvasgradient, vous pouvez utiliser deux méthodes: CreateLineargradient et Createradialgradient. Le premier crée un dégradé de couleurs linéaire, et le second crée un gradient de couleurs circulaires. Après avoir créé un objet de gradient de couleur, vous pouvez utiliser la méthode AddColOrStop de l'objet pour ajouter des valeurs intermédiaires de couleur. Le code suivant montre comment utiliser les gradients de couleur:

// Vous devez fournir les coordonnées source et destination (x, y)

// pour le dégradé (d'où il commence et où il se termine).

var gradient1 = context.CreateElineargradient (SX, SY, DX, DY);

// Maintenant, vous pouvez ajouter des couleurs dans votre dégradé.

// Le premier argument indique la position de la couleur de votre dégradé. Le

// La plage de valeurs acceptée est de 0 (démarrage du gradient) à 1 (extrémité du gradient).

// Le deuxième argument indique la couleur que vous souhaitez, en utilisant le format de couleur CSS.

Gradient1.AddColOrStop (0, «# f00»); // rouge

Gradient1.AddColOrStop (0,5, «# ff0»); // jaune

Gradient1.AddColOrStop (1, «# 00F»); // bleu

// Pour le dégradé radial, vous devez également fournir une source

// et le rayon du cercle de destination.

// Les coordonnées (x, y) définissent les points centraux du cercle (démarrer et

// destination).

var gradient2 = context.CreaterAdialgradient (SX, SY, SR, DX, DY, DR);

// ajouter des couleurs à un dégradé radial est le même que l'ajout de couleurs à linéaire

// gradients.

J'ai également préparé un exemple plus complexe en utilisant des gradients de couleur linéaire, des ombres et du texte.

L'effet est illustré dans la figure ci-dessous:

Démo sur toile:

Si vous voulez savoir ce que vous pouvez faire avec Canvas, veuillez vous référer au projet suivant:

Widget d'opéra:

Simaquarium

Carnet de croquis de l'artiste

Spirographe

Ingénierie et démonstration en ligne:

Newton Polynomial

Canvascape - 3D Walker

Peinture.web - Demo de peinture, open-source

Vol de champ étoile

Blob interactif

Sous-section:

Canvas est l'une des fonctionnalités les plus attendues de HTML 5 et est actuellement prise en charge par la plupart des navigateurs Web. Canvas peut aider à créer des jeux et à améliorer les interfaces utilisateur graphiques. Contexte 2D

L'API offre de nombreuses capacités de dessin graphique - j'espère que vous avez appris à utiliser Canvas via cet article et que vous souhaitez en savoir plus!