Tutoriel sur l'utilisation de HTML5 Canvas pour remplir des images avec des couleurs et des astuces du didacticiel texture_html5

Couleur de remplissage

L'art est indissociable de la couleur. Aujourd'hui, nous allons présenter la couleur de remplissage et découvrir le charme de la couleur.
Il existe deux principaux types de couleurs de remplissage :

1. Couleur de base
2. Couleur du dégradé (également divisé en dégradé linéaire et dégradé radial)

Regardons-les un par un.

Couleur de base de remplissage
La propriété Canvas fillStyle est utilisée pour définir la couleur de base et le remplissage de la forme sur le canevas. fillStyle utilise des noms de couleurs simples. Cela semble très simple, par exemple :

Code JavaScriptCopier le contenu dans le presse-papiers

1. context.fillStyle = "rouge"

Ce qui suit est une liste de seize valeurs de chaînes de couleurs disponibles à partir de la spécification HTML4. Puisque HTML5 ne modifie pas les couleurs exclusives, les couleurs HTML4 peuvent être affichées correctement en HTML5.

Toutes ces valeurs de couleur peuvent être appliquées aux propriétés StrokeStyle et FillStyle.
D'accord, permettez-moi de résumer la méthode de remplissage des couleurs de base : (peut également être utilisé pour l'attribut StrokeStyle)
(1) Utilisez le remplissage de chaînes de couleurs.

Code JavaScriptCopier le contenu dans le presse-papiers

1. context.fillStyle = "rouge"

(2) Utilisez un remplissage de chaîne de chiffres hexadécimaux.

Code JavaScriptCopier le contenu dans le presse-papiers

1. context.fillStyle = "#FF0000";

(3) Remplissez avec une abréviation de chaîne de chiffres hexadécimaux.

Code JavaScriptCopier le contenu dans le presse-papiers

1. context.fillStyle = "#F00"

(4) Utilisez la méthode rgb() pour définir la couleur.

Code JavaScriptCopier le contenu dans le presse-papiers

1. context.fillStyle = "rgb(255,0,0)"

(5) Utilisez la méthode rgba() pour définir la couleur.
Code JavaScriptCopier le contenu dans le presse-papiers

1. context.fillStyle = "rgba(255,0,0,1)"

Le dernier paramètre de cette méthode est la valeur alpha et la plage de transparence est de 1 (opaque) ~ 0 (transparent).
(6) Utilisez la méthode hsl() pour définir la couleur.

Code JavaScriptCopier le contenu dans le presse-papiers

1. context.fillStyle = "hsl(0,100%,50%)"

HSL représente la couleur des trois canaux de teinte (H), de saturation (S) et de luminosité (L).
(7) Utilisez la méthode hsla() pour définir la couleur.

Code JavaScriptCopier le contenu dans le presse-papiers

1. context.fillStyle = "hsla(0,100%,50%,1)"

Les 7 phrases de code ci-dessus sont toutes remplies de "#FF0000" en rouge.

Remplir une forme dégradée
Il existe deux options de base pour créer un remplissage dégradé sur la toile : linéaire ou radial. Les dégradés linéaires créent un motif de remplissage horizontal, vertical ou diagonal. Les dégradés radiaux créent un remplissage radial à partir d'un point central. Il y a trois étapes pour remplir une forme de dégradé : ajouter une ligne de dégradé, ajouter une couleur clé à la ligne de dégradé et appliquer le dégradé. En voici quelques exemples.
Dégradé linéaire
Stratégie en trois étapes :
Ajouter des lignes de dégradé :

Code JavaScriptCopier le contenu dans le presse-papiers

1. var grd = context.createLinearGradient(xstart,ystart,xend,yend);

Ajoutez une couleur clé à la ligne de dégradé (semblable à un point d'arrêt de couleur) :

Code JavaScriptCopier le contenu dans le presse-papiers

1. grd.addColorStop(arrêt, couleur);

Le stop ici est un nombre à virgule flottante de 0 à 1, qui représente la proportion de la distance entre le point d'arrêt et (xstart, ystart) par rapport à la longueur totale du dégradé.

Appliquer le dégradé :

Code JavaScriptCopier le contenu dans le presse-papiers

1. context.fillStyle = grd;
2. context.StrokeStyle = grd

Écrivez un code pour y jeter un œil.

Code JavaScriptCopier le contenu dans le presse-papiers

2. "zh">
3. "UTF-8"
4. >
6. "toile-warp"
7. >
8. "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">
9. Votre navigateur ne prend pas en charge Canvas ? ! Changez-le vite ! !

<script> </li> <li> <span></span> window.onload = </li> <li class="alt">fonction<span></span>(){ </li> <li> <span></span> </li> <li class="alt">var<span></span> canvas = document.getElementById(<span class="keyword"></span>"canvas"<span></span> </li> <li>); <span></span> toile.width = 800 <span class="keyword"></span> <span></span> toile.hauteur = 600 <span class="string"></span> <span></span> </li> <li class="alt">var<span></span> context = canvas.getContext(</li> <li>"2d"<span></span> </li> <li class="alt">); <span></span> <span class="keyword"></span> <span></span>context.rect(200,100,400,400); <span class="string"></span> <span></span> </li> <li> <span></span> </li> <li class="alt">//Ajouter une ligne de dégradé <span></span> </li> <li> <span></span> </li> <li class="alt">var<span></span> grd = context.createLinearGradient(200,300,600,300); <span class="comment"></span> <span></span> </li> <li> <span></span> <span class="keyword"></span>//Ajouter des points d'arrêt de couleur <span></span> </li> <li class="alt"> <span></span> grd.addColorStop(0,</li> <li>"noir"<span></span> <span class="comment"></span>); <span></span> grd.addColorStop(0.5,</li> <li class="alt">"blanc"<span></span> <span class="string"></span>); <span></span> grd.addColorStop(1,</li> <li>"noir"<span></span> <span class="string"></span>); <span></span> </li> <li class="alt"> <span></span> <span class="string"></span>//Appliquer le dégradé <span></span> </li> <li> <span></span> context.fillStyle = grd </li> <li class="alt"> <span></span> <span class="comment"></span> <span></span>context.fill(); </li> <li> <span></span> </li> <li class="alt"> <span></span> } </li> <li> <span></span></script>

Résultat de l'exécution :

Je pense qu'il est nécessaire de faire une illustration pour que tout le monde puisse comprendre le dégradé en même temps.

Afin de faciliter la compréhension, il est recommandé de considérer la ligne de dégradé comme un segment de ligne orienté. Si vous êtes familier avec les outils de dessin tels que PS et avez utilisé les paramètres de dégradé, vous devriez avoir une bonne compréhension.
Le point de départ et le point final de la ligne de dégradé ne doivent pas nécessairement se trouver dans l'image, et la position du point d'arrêt de couleur est la même. Mais si la plage de l'image est plus grande que la ligne de dégradé, alors en dehors de la plage de la ligne de dégradé, la couleur du point d'arrêt le plus proche du point final sera automatiquement remplie.
Voici un autre exemple avec deux fonctions supplémentaires.

Un moyen rapide de dessiner un rectangle

Code JavaScriptCopier le contenu dans le presse-papiers

1. fillRect(x,y,width,height)、stroke(x,y,width,height)。这两个函数可以分别看做rect()与fill()以及rect()与stroke()的组合。因为rect()仅仅只是规划路径而已，而这两个方法确实实实在在的绘制。   
2.   
3. "zh">   
4.   
5.     "UTF-8">   
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

<script> </span></li> <li> <span> window.onload = </span><span class="keyword">fonction</span><span>(){ </span> </li> <li class="alt"> <span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span> </span> </li>); <li><span> toile.width = 800 </span></li> <li class="alt"><span> toile.hauteur = 600 </span></li> <li> <span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span> </span> </li>); <li class="alt"><span> </span></li> <li> <span> </span><span class="comment">//Ajouter une ligne de dégradé </span><span> </span> </li> <li class="alt"> <span> </span><span class="keyword">var</span><span> grd = context.createLinearGradient(100,300,700,300); </span> </li> <li><span> </span></li> <li class="alt"> <span> </span><span class="comment">//Ajouter des points d'arrêt de couleur </span><span> </span> </li> <li> <span> grd.addColorStop(0,</span><span class="string">"olive"</span><span> </span> </li>); <li class="alt"> <span> grd.addColorStop(0.25,</span><span class="string">"marron"</span><span>); </span> </li> <li> <span> grd.addColorStop(0.5,</span><span class="string">"aqua"</span><span> </span> </li>); <li class="alt"> <span> grd.addColorStop(0.75,</span><span class="string">"fuchsia"</span><span>); </span> </li> <li> <span> grd.addColorStop(0.25,</span><span class="string">"sarcelle"</span><span> </span> </li>); <li class="alt"><span> </span></li> <li> <span> </span><span class="comment">//Appliquer le dégradé </span><span> </span> </li> <li class="alt"><span> context.fillStyle = grd </span></li> <li><span> context.StrokeStyle = grd </span></li> <li class="alt"><span> </span></li> <li><span> context.StrokeRect(200,50,300,50); </span></li> <li class="alt"><span> context.StrokeRect(200,100,150,50); </span></li> <li><span> context.StrokeRect(200,150,450,50); </span></li> <li class="alt"><span> </span></li> <li><span> context.fillRect(200,300,300,50); </span></li> <li class="alt"><span> context.fillRect(200,350,150,50); </span></li> <li><span>context.fillRect(200,400,450,50); </span></li> <li class="alt"><span> </span></li> <li><span>context.fillRect(0,550,800,25); </span></li> <li class="alt"><span> </span></li> <li><span> } </span></li> <li class="alt"><span></script>

Résultat de l'exécution :

Les deux pages ont des dégradés horizontaux, mais il doit être clair que les dégradés linéaires ne sont pas nécessairement horizontaux et que la direction peut être arbitraire. La direction est définie par les extrémités de la ligne de dégradé.

Dégradé Radial
C'est aussi une stratégie en trois étapes, mais la méthode utilisée dans la première étape a changé.
Ajouter un cercle dégradé :

Code JavaScriptCopier le contenu dans le presse-papiers

1. var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1

Ajoutez une couleur clé à la ligne de dégradé (semblable à un point d'arrêt de couleur) :

Code JavaScriptCopier le contenu dans le presse-papiers

1. grd.addColorStop(arrêt, couleur);

Appliquer le dégradé :

Code JavaScriptCopier le contenu dans le presse-papiers

1. context.fillStyle = grd;
2. context.StrokeStyle = grd

Un dégradé linéaire est défini en fonction de deux points finaux, mais un dégradé radial est défini en fonction de deux cercles.
Réécrivons l’exemple 7-2.

Code JavaScriptCopier le contenu dans le presse-papiers

2. "zh">
3. "UTF-8"
4. >
6. "toile-warp"
7. >
8. "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">
9. Votre navigateur ne prend pas en charge Canvas ? ! Changez-le vite ! !

<script> </li> <li> <span></span> window.onload = </li> <li class="alt">fonction<span></span>(){ </li> <li> <span></span> </li> <li class="alt">var<span></span> canvas = document.getElementById(<span class="keyword"></span>"canvas"<span></span> </li> <li>); <span></span> toile.width = 800 <span class="keyword"></span> <span></span> toile.hauteur = 600 <span class="string"></span> <span></span> </li> <li class="alt">var<span></span> context = canvas.getContext(</li> <li>"2d"<span></span> </li> <li class="alt">); <span></span> <span class="keyword"></span> <span></span> <span class="string"></span>//Ajouter une ligne de dégradé <span></span> </li> <li> <span></span> </li> <li class="alt">var<span></span> grd = context.createRadialGradient(400,300,100,400,300,200); <span class="comment"></span> <span></span> </li> <li> <span></span> <span class="keyword"></span>//Ajouter des points d'arrêt de couleur <span></span> </li> <li class="alt"> <span></span> grd.addColorStop(0,</li> <li>"olive"<span></span> <span class="comment"></span>); <span></span> grd.addColorStop(0.25,</li> <li class="alt">"marron"<span></span>); <span class="string"></span> <span></span> grd.addColorStop(0.5,</li> <li>"aqua"<span></span> <span class="string"></span>); <span></span> grd.addColorStop(0.75,</li> <li class="alt">"fuchsia"<span></span>); <span class="string"></span> <span></span> grd.addColorStop(0.25,</li> <li>"sarcelle"<span></span> <span class="string"></span>); <span></span> </li> <li class="alt"> <span></span> <span class="string"></span>//Appliquer le dégradé <span></span> </li> <li> <span></span> context.fillStyle = grd </li> <li class="alt"> <span></span> <span class="comment"></span> <span></span>context.fillRect(100,100,600,400); </li> <li> <span></span> </li> <li class="alt"> <span></span> </li> <li> <span></span> } </li> <li class="alt"> <span></span></script>

Résultat de l'exécution :

Pourquoi pensez-vous que cette combinaison de couleurs est si... oubliez ça, cela s'appelle de l'art. La méthode
createRadialGradient(x0,y0,r0,x1,y1,r1); spécifie la plage de début et de fin du dégradé radial, c'est-à-dire le dégradé entre deux cercles.
Pour résumer, dans cette leçon, nous avons appris fillStyle, createLinearGradient(), createRadialGradient(), addColorStop(), fillRect(), StrokeRect() et d'autres attributs et méthodes, et avons introduit en détail le remplissage des couleurs de base, linéaires. dégradés et dégradé radial.
D'accord, maintenant que nous avons appris à colorier, utilisons les couleurs à notre guise et dessinons nos propres œuvres d'art !

Texture de remplissage

Introduction à createPattern()
La texture est en fait une répétition du motif, et le motif de remplissage est initialisé via la fonction createPattern(). Il doit transmettre deux paramètres createPattern(img,repeat-style), le premier est une instance d'objet Image et le deuxième paramètre est un type String, indiquant comment afficher le motif de répétition dans la forme. Vous pouvez utiliser cette fonction pour charger une image ou la totalité du canevas comme motif de remplissage pour une forme.
Il existe les 4 types de remplissage d'image suivants :

1. Répétez sur l'avion : répétez ;
2. Répétez sur l'axe des x : répétez-x ;
3. Répétez sur l'axe des y : répétez-y ; ne pas utiliser répéter : non-répéter ;

En fait, le premier paramètre de createPattern() peut également être passé dans un objet canevas ou un objet vidéo. Ici, nous expliquons uniquement l'objet Image, et vous pouvez essayer le reste par vous-même.

Créer et remplir des motifs
Voyons d'abord comment charger des images :

Créer un objet Image

Spécifiez la source d'image pour l'objet Image

Le code est le suivant :

Code JavaScriptCopier le contenu dans le presse-papiers

1. var img = nouveau Image(); //Créer un objet Image
2. img.src = "8-1.jpg" //Spécifiez la source de l'image pour l'objet Image

Extension : Le chemin relatif en HTML

'../répertoire ou nom de fichier' ou 'répertoire ou nom de fichier' fait référence au chemin du répertoire où se trouve le fichier actuellement exploité
'../ répertoire ou nom de fichier' Il fait référence au chemin du répertoire au-dessus du répertoire où se trouve le fichier actuellement exploité

Remplir la texture ensuite :

Code JavaScriptCopier le contenu dans le presse-papiers

1. var pattern = context.createPattern(img,"repeat" );
2. context.fillStyle = motif

Regardons directement un programme complet. Ici, je veux remplir à plusieurs reprises cette jolie girafe comme texture. Il convient de noter que lors de la sélection des images, vous devez choisir des images qui communiquent entre elles de gauche à droite et de haut en bas sous forme de texture, afin qu'il n'y ait pas de connexions courtes anormales.

Code fourni ci-dessous.

Code JavaScriptCopier le contenu dans le presse-papiers

2. "zh">
4. "UTF-8">
"キャンバスワープ"> "キャンバス" style="ボーダー: 1px ソリッド #aaaaaa; 表示: ブロック; マージン: 50px 自動;"> あなたのブラウザは Canvas をサポートしていませんか? ！早く変えてください！ ！
<スクリプト
window.onload =
11. function(){
12. var Canvas = document.getElementById("canvas"); Canvas.width = 800;
Canvas.height = 600;
var
14. context = Canvas.getContext(
"2d"
15. ); var
img =
16. new
Image();
17. img.src = "8-1.jpg"; img.onload = function
(){
18. var
pattern = context.createPattern(img,
19. "repeat"); context.fillStyle = パターン
20. context.fillRect(0,0,800,600);
}
25. 実行結果:
26. ここでは、Image の onload イベントが使用されます。その機能は、イメージをプリロードすることです。つまり、後続の関数のコード本体は、イメージがロードされた直後に削除されます。これは必要ですが、書かれていない場合、キャンバスには黒い画面が表示されます。テクスチャは画像のロードを待たずに塗りつぶされるため、ブラウザは画像を見つけることができません。 ここでは「繰り返し」が使用されていますが、他の 3 つの値を使用して、どのような効果があるかを確認することもできます。他の写真を見つけて入力して効果を確認することもできます。