Tutoriel de base sur le dessin de texte et d'images en HTML5 Compétences du didacticiel Canvas_html5

Dessiner du texte

En HTML5, on peut aussi dessiner le texte dont on a besoin sur le "canvas" Canvas. Les principales propriétés et méthodes de l'objet CanvasRenderingContext2D impliqué sont les suivantes :

属性或方法	基本描述
font	设置绘制文字所使用的字体，例如20px 宋体，默认值为10px sans-serif。该属性的用法与css font属性一致，例如italic bold 14px/30px Arial,宋体
fillStyle	用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
strokeStyle	用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
fillText(string text, int x, int y[, int maxWidth])	从指定坐标点位置开始绘制填充的文本文字。参数maxWidth是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。与本方法对应的样式设置属性为fillStyle。
strokeText(string text, int x, int y[, int maxWidth])	从指定坐标点位置开始绘制非填充的文本文字(文字内部是空心的)。参数maxWidth是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。该方法与fillText()用法一致，不过strokeText()绘制的文字内部是非填充(空心)的，fillText()绘制的文字是内部填充(实心)的。与本方法对应的样式设置属性为strokeStyle。

D'après les informations de description de l'API ci-dessus, nous pouvons savoir qu'il existe deux façons de dessiner du texte dans Canvas : l'une consiste à utiliser fillText() fillStyle pour dessiner du texte rempli (solide) ; texte non rempli (creux).

Voyons ensuite comment utiliser Canvas pour dessiner du texte solide. Le code HTML spécifique est le suivant :

Code JavaScriptCopier le contenu dans le presse-papiers

4. "UTF-8">
"myCanvas" width=
9. "400px" height="300px" style="bordure : 1px rouge uni ;"> Votre navigateur ne prend pas en charge la balise canvas.

13. L'effet d'affichage correspondant est le suivant :
    

    Ensuite, nous gardons les autres conditions environnementales inchangées et utilisons à nouveau la méthode StrokeText() StrokeStyle pour dessiner le texte dans l'exemple ci-dessus. Le code JavaScript correspondant est le suivant :

    Code JavaScriptCopier le contenu dans le presse-papiers

    2. Lorsque nous utiliserons le navigateur pour accéder à nouveau à la page, nous verrons l'effet d'affichage suivant (les mots "CodePlayer" dans l'image de l'effet sont en fait creux, mais comme la police est plus petite, les deux côtés semblent se chevaucher) :

    
    Dessiner des images

    En HTML5, en plus d'utiliser le canevas pour dessiner des graphiques vectoriels, nous pouvons également dessiner des fichiers image existants sur le canevas "canvas".

    
    Tout d'abord, examinons les principales propriétés et méthodes de l'objet CanvasRenderingContext2D qui sont nécessaires pour dessiner des fichiers image à l'aide de Canvas :
    

    Code XML/HTML
    Copier le contenu dans le presse-papiers
    drawImage(image mixte, int x, int y)

    1. À partir du point de coordonnées spécifié sur la toile, dessinez l'image entière en fonction de la taille originale de l'image. L'image ici peut être un objet Image ou un objet Canvas (le même ci-dessous).

    Code XML/HTML
    

    Copier le contenu dans le presse-papiers
    drawImage (image mixte, int x, int y, int largeur, int hauteur)

    1. Commencez à partir du point de coordonnées spécifié sur la toile et dessinez l'image entière avec la taille spécifiée (largeur et hauteur). L'image sera automatiquement mise à l'échelle en fonction de la taille spécifiée.
       drawImage(image mixte, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)
       Convertir l'image partielle de l'image spécifiée (avec (imageX, imageY) comme coin supérieur gauche, la largeur est imageWidth, la hauteur est imageHeight) est dessinée dans le canevas dans une zone rectangulaire avec (canvasX, canvasY) comme coordonnées du coin supérieur gauche, la largeur est canvasWidth et la hauteur est canvasHeight
       Oui, vous lisez bien. Pour dessiner une image dans Canvas, nous pouvons utiliser une méthode appelée drawImage(), mais cette méthode a trois variantes différentes. Chaque variante de méthode permet de recevoir non seulement un nombre différent de paramètres, mais aussi la signification des paramètres.

       Ici, nous donnons des exemples de chacune des trois variantes ci-dessus.

       Tout d'abord, nous dessinons l'image du logo Google sur une toile (la taille originale est de 550 x 190) en utilisant la première variante de drawImage().

       Code JavaScriptCopier le contenu dans le presse-papiers

       4. "UTF-8">
       "myCanvas" width=
       9. "400px" height="300px" style="bordure : 1px rouge uni ;"> Votre navigateur ne prend pas en charge la balise canvas.

       14. L'effet d'affichage correspondant est le suivant :
           

           Étant donné que l'image du logo Google est trop grande et dépasse la plage de taille du canevas, seule une partie de l'image peut être affichée. À ce stade, nous utilisons la deuxième variante pour réduire l'image du logo Google à la largeur et à la hauteur spécifiées et la dessiner dans le canevas.

           Code JavaScriptCopier le contenu dans le presse-papiers

           2. Après avoir mis à l'échelle l'image du logo Google, vous pouvez maintenant voir l'image entière dans le canevas :
           Enfin, nous utilisons la troisième variante de méthode pour dessiner la partie "Goo" du logo Google dans le canevas (la taille de l'image de la partie "Goo" peut être mesurée à l'aide d'outils tels que Photoshop, et la taille mesurée est utilisée directement ici. résultat).

           
           

           Code JavaScript
           Copier le contenu dans le presse-papiers
           2. À ce stade, nous pouvons voir l'image partielle "Goo" affichée dans le canevas :