5 La spécification introduit de nombreuses nouvelles fonctionnalités, l'une des plus excitantes est canvas . HTML5 canvas fournit un moyen de dessiner des graphiques via JavaScript, qui est simple à utiliser mais puissant. Chaque élément canvas a un contexte (contexte) (considérez comme une page sur la planche à dessin) où n'importe quelle forme peut être dessinée. Le navigateur prend en charge plusieurs contextes de canevas et fournit des fonctions de dessin graphique via différentes. Fournit une fonction de dessin graphique. 5 La spécification introduit de nombreuses nouvelles fonctionnalités, l'une des plus excitantes est les éléments. HTML5 fournit une méthode pour dessiner des graphiques via JavaScript, qui est simple à utiliser mais puissant. Chaque élément 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 canevas et fournit des fonctions de dessin graphique via différentes.
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:
Article de contexte
Cet article présente une toile 2D
Bases et comment utiliser les fonctions de base du canevas 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
La méthode pour créer Canvas est très simple, il vous suffit d'ajouter l'élément <canvas> à la page HTML:
<canvas id=mycanvas width=300 height=150>fallback content, in case the browser does not support canvas.</canvas>Afin de pouvoir référencer les éléments en JavaScript, il est préférable de définir l'ID pour l'élément; Il doit également définir la hauteur et la largeur pour la toile.
Une fois la toile créée, préparons le pinceau. Pour dessiner un graphique dans une toile, vous devez utiliser JavaScript. Trouver d'abord Canvas via getelementbyid
élément, puis initialisez le contexte. Divers graphismes peuvent être dessinés plus tard en utilisant l'API de contexte. Le script suivant dessine un rectangle en toile (cliquez ici pour afficher l'effet):
// get a reference to the element.var elem = document.getelementbyid('mycanvas');// always check for properties 和methods, to make sure your code doesn't break // in other browsers.if (elem && elem.getcontext) { // get the 2d context. // remember: you can only initialize one context per element. var context = elem.getcontext('2d'); if (context) { // you are done! now you can draw your first rectangle. // you only need to provide the (x,y) coordinates, followed by the width and // height dimensions. context.fillrect(0, 0, 150, 100); }} Vous pouvez placer le code ci-dessus dans head du document ou dans un fichier externe.
Après avoir introduit comment créer une toile, jetons un coup d'œil à l'API 2D Canvas et voyons ce qui peut être fait avec ces fonctions.
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. Méthode d'utilisation de la valeur des couleurs et numéro hexadécimal, (), () et () (si le navigateur le prend en charge, comme l'opéra
10 et Firefox 3). () (Si le navigateur le prend en charge, comme Opera10 et Firefox 3). () et () (si le navigateur le prend en charge, comme Opera10 et Firefox 3). (), () et () (si le navigateur le prend en charge, comme Opera10 et Firefox 3). Nombres hexadécimaux, (), () et () (s'ils sont soutenus par le navigateur, comme Opera10 et Firefox 3).
fillrect peut être utilisé pour dessiner un rectangle de remplissage. Utilisez strokerect 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 l'attribut Linewidth pour modifier l'épaisseur de la ligne. Voyons si fillrect est utilisé,
strokerect clearrect et autres exemples:
context.fillstyle = '#00f'; // bluecontext.strokestyle = '#f00'; // redcontext.linewidth = 4;// draw some rectangles.context.fillrect (0, 0, 150, 50);context.strokerect(0, 60, 150, 50);context.clearrect (30, 25, 90, 60);context.strokerect(30, 25, 90, 60);Cet exemple de rendu est illustré à la figure 1.
Figure 1: Fillrect, starekect et
diagramme d'effet clearrect
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 fill et stroke pour ajouter un remplissage ou régler les bordures. Appelez closepath() pour mettre fin à un dessin graphique personnalisé.
Voici un exemple de dessin d'un triangle:
// set the style properties.context.fillstyle = '#00f';context.strokestyle = '#f00';context.linewidth = 4;context.beginpath();// start from the top-left point.context.moveto(10, 10); // give the (x,y) coordinatescontext.lineto(100, 10);context.lineto(10, 100);context.lineto(10, 10);// done! now fill the shape, 和draw the stroke.// note: your shape will not be visible until you call any of the two methods.context.fill();context.stroke();context.closepath();Les rendus sont illustrés à la figure 2.
Figure 2: triangle
Un autre exemple plus responsable utilise des lignes, des courbes et des arcs droits.
La méthode drawimage permet d'insérer d'autres images en toile
(Éléments img et canvas ). Dans l'opérateur, vous pouvez dessiner des graphiques SVG dans Canvas. Cette méthode est assez complexe et peut avoir des paramètres 3, 5 ou 9:
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.drawimage 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).drawimage la plus complexe, 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:
// three arguments: the element, destination (x,y) coordinates.context.drawimage( img_elem , dx , dy );// five arguments: the element, destination (x,y) coordinates, and destination // width and height (if you want to resize the source image).context.drawimage( img_elem , dx , dy , dw , dh );// nine arguments: the element, source (x,y) coordinates, source width and // height (for cropping), destination (x,y) coordinates, and destination width // and height (resize).context.drawimage( img_elem , sx , sy , sw , sh , dx , dy , dw , dh );L'effet est illustré à la figure 3.
Figure 3: rendu drawimage .
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 width * height *4 pixels. Chaque pixel a une valeur RVB et une valeur alpha de transparence (sa valeur est 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 - dessiner un rectangle rouge
// create an imagedata object.var imgd = context.createimagedata(50,50);var pix = imgd.data;// loop over each pixel 和set a transparent red.for (var i = 0; n = pix.length, i < n; i += 4) { pix[i ] = 255; // red channel pix[i+3] = 127; // alpha channel}// draw the imagedata object at the given (x,y) coordinates.context.putimagedata(imgd, 0,0); Remarque: Tous les navigateurs n'implémentent pas createimagedata . Dans les navigateurs pris en charge, imagedata doit être obtenu via getimagedata . Veuillez vous référer à l'exemple de code.
De nombreuses fonctions peuvent être accomplies par imagedata . 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:
// get the canvaspixelarray from the given coordinates and dimensions.var imgd = context.getimagedata( x , y , width , height );var pix = imgd.data;// loop over each pixel and invert the color.for (var i = 0, n = pix.length; i < n; i += 4) { pix[i ] = 255 - pix[i ]; // red pix[i+1] = 255 - pix[i+1]; // green pix[i+2] = 255 - pix[i+2]; // blue // i+3 is alpha (the fourth element)}// draw the imagedata at the given (x,y) coordinates.context.putimagedata(imgd, x , y );La figure 4 montre l'opéra après avoir utilisé ce filtre
Image (la figure 3 est l'image d'origine).
Figure 4: Filtre d'inversion des couleurs
Bien que la version WebKit récente et la version nocturne de Firefox 3.1 aient seulement commencé à prendre en charge les API de 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 context :
font : police de texte, même Attribut d'attribut font-family
textalign : Alignement horizontal du texte. Valeurs d'attribut souhaitables: start , end , left , right , center . Valeur par défaut:
start .
textbaseline : Alignement vertical du texte. Valeurs d'attribut souhaitables: top , hanging , middle , alphabetic , ideographic , bottom . Valeur par défaut: alphabetic .
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 uniquement une bordure de style coup . 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 le texte et les paramètres
(x, y) La position relative des coordonnées.
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);La figure 5 est son rendu.
Figure 5: effet texte
Actuellement, seulement Konqueror et Firefox 3.1 Build Build Support Shadows API. 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 dans 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é à la figure 6.
Figure 6: Effet de l'ombre en toile - rectangle bleu, ombre rouge
En plus de la couleur CSS, les propriétés fillstyle et strokestyle peuvent être réglées sur des objets canvasgradient . - canvasgradient peut utiliser des gradients de couleur pour les lignes et les remplissages.
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:
// you need to provide the source 和destination (x,y) coordinates // for the gradient (from where it starts 和where it ends).var gradient1 = context.createlineargradient( sx , sy , dx , dy );// now you can add colors in your gradient.// the first argument tells the position for the color in your gradient. the // accepted value range is from 0 (gradient start) to 1 (gradient end).// the second argument tells the color you want, using the css color format.gradient1.addcolorstop(0, '#f00'); // redgradient1.addcolorstop(0.5, '#ff0'); // yellowgradient1.addcolorstop(1, '#00f'); // blue// for the radial gradient you also need to provide source// 和destination circle radius.// the (x,y) coordinates define the circle center points (start 和// destination).var gradient2 = context.createradialgradient( sx , sy , sr , dx , dy , dr );// adding colors to a radial gradient is the same as adding colors to linear // 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é à la figure 7.
Figure 7: Exemple d'utilisation du gradient de couleur linéaire
Si vous voulez savoir ce que vous pouvez faire avec Canvas, veuillez vous référer au projet suivant:
carnet de croquis
démo, open-source
vol
Canvas est l'une des fonctionnalités les plus attendues de HTML5 et a été 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!