HTML5 Canvas traitement de pixel

HTML5 Canvas création d'animation

HTML5 Canvas dégradé

Canvas dégradé peut être utilisé comme un motif de remplissage ou de pinceau de couleur pour la forme, au lieu de la couleur pure. Le dégradé est un motif de couleur qui change de couleur d'une couleur à l'autre. Le dégradé a deux types : Linear (linéaire) et Radial (radial)

1. Canvas dégradé peut être utilisé comme un motif de remplissage ou de pinceau de couleur pour la forme, au lieu de la couleur pure. Le dégradé est un motif de couleur qui change de couleur d'une couleur à l'autre. Voici quelques exemples pour illustrer mon idée:

2. Il y a deux types de dégradés:

Linear (linéaire)
Radial (radial)
Deux types de dégradés sont présentés dans cet article. Le dégradé radial utilise un motif circulaire pour changer la couleur, en changeant la couleur de l'intérieur vers l'extérieur. Le dégradé linéaire utilise un motif linéaire horizontal, vertical ou diagonal pour changer la couleur.

dégradé linéaire

Comme mentionné précédemment, le dégradé linéaire utilise un motif linéaire pour changer la couleur. Utilisez2Dfonction de contexte pour créer un dégradé linéaire createLinearGradient(). Voici un exemple:

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
　　　　
var　x1　= 0;
var　y1　= 0;
var　x2　=　100;
var　y2　= 0;
var linearGradient1　= context.createLinearGradient(x1,　y1,　x2,　y2);

La fonction createLinearGradient() adopte4paramètres : x1, y1x2, y2Cela4。1, y1paramètres déterminent la direction et l'extension du motif de dégradé. La gradation commence au premier point x2, y2s'étend au deuxième point x
。1, et x2） pour créer un dégradé horizontal, comme suit:

　　　　var　x1　= 0;
　　　　var　y1　= 0;　　　　var x2　=　100;
　　　　var　y2　= 0;
　　　　var linearGradient1　= context.createLinearGradient(x1,　y1,　x2,　y2);

Pour créer un dégradé horizontal, il suffit de modifier la valeur du paramètre y (pour y1et y2） pour créer un dégradé vertical, comme suit:

　　　　var　x1　= 0;　　　　var y1　= 0;
　　　　var　x2　= 0;　　　　var y2　=　100;
　　　　var linearGradient1　= context.createLinearGradient(x1,　y1,　x2,　y2);

Pour créer un dégradé en diagonale, il suffit de modifier les paramètres x et y en même temps. Voici un exemple:

　　　　var　x1　= 0;
　　　　var　y1　= 0;
　　　　var　x2　=　100;
　　　　var　y2　=　100;
　　　　var linearGradient1　= context.createLinearGradient(x1,　y1,　x2,　y2);

arrêt de couleur

L'exemple ci-dessus n'affiche pas les couleurs du dégradé. Pour définir les couleurs du dégradé, vous pouvez utiliser la fonction addColorStop() sur l'objet de dégradé. Voici un exemple:

var linearGradient1　= context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0,　'rgb(255,　0,　0)');
linearGradient1.addColorStop(1,　'rgb(　　0,　0,　0)');

La fonction addColorStop() a2paramètre. Le premier paramètre est compris entre 0 et1entre les nombres. Ce nombre indique à quelle distance ce point de couleur sera placé dans la zone de dégradé. Le second paramètre est la couleur elle-même. Notez comment, dans cet exemple, l'utilisation de la notation de couleur rbg(red, green, blue), où chaque composant rouge/vert/la valeur bleue peut être de 0 à255entre les nombres (par exemple1octets représentés).
L'exemple ci-dessus ajoute deux étiquettes de couleur. La première est rouge, réglée pour commencer à partir du point de départ du dégradé (le premier paramètre est 0). La deuxième couleur est noire, réglée pour se situer à la fin de la zone de dégradé (le premier paramètre est1）。
Vous pouvez ajouter deux ou plus d'indicateurs de couleur au dégradé. Voici un exemple avec3Exemple de couleurs d'indicateur:

var linearGradient1　= context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0　　,　'rgb(255,　0,　0)');
linearGradient1.addColorStop(0.5,　'rgb(　　0,　0,　255);
linearGradient1.addColorStop(1　　,　'rgb(　　0,　0,　0)');

Dans cet exemple, une couleur bleue est ajoutée au milieu du dégradé. Le dégradé passera donc du rouge au bleu, puis au noir.

Utiliser le dégradé comme style de remplissage ou de contour

Vous pouvez utiliser le dégradé comme style de remplissage ou de contour.2D'attributs fillStyle ou strokeStyle de contexte pour pointer vers l'objet dégradé. Voici un exemple :

var linearGradient1　= context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0　　,　'rgb(255,　0,　0)');
linearGradient1.addColorStop(0.5,　'rgb(　　0,　0,　255);
linearGradient1.addColorStop(1　　,　'rgb(　　0,　0,　0)');
context.fillStyle = linearGradient1;
context.strokeStyle = linearGradient1;

Maintenant, vous pouvez utiliser le dégradé comme couleur de remplissage ou de contour pour le dessin. Voici un exemple de dessin de deux rectangles-Un est rempli, l'autre est bordé (schéma):

<canvas id="ex2" width="500" height="125" style="border:　1px solide #cccccc;">
　　　　HTML5　Canvas non pris en charge
</canvas>
<script>
var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d");
var linearGradient1　= context.createLinearGradient(0,0,100,0);　//horizontal gradient
linearGradient1.addColorStop(0　　,　'rgb(255,　0,　　　0)');
linearGradient1.addColorStop(0.5,　'rgb(　　0,　0,　255)');
linearGradient1.addColorStop(1　　,　'rgb(　　0,　0,　　　0)');
context.fillStyle = linearGradient1;
context.fillRect(10,10,100,　100);
var linearGradient2　= context.createLinearGradient(125,0,　225,0);　//horizontal gradient
linearGradient2.addColorStop(0　　,　'rgb(255,　0,　　　0)');
linearGradient2.addColorStop(0.5,　'rgb(　　0,　0,　255)');
linearGradient2.addColorStop(1　　,　'rgb(　　0,　0,　　　0)');
context.strokeStyle = linearGradient2;
context.strokeRect(125,　10,　100,　100);
</script>

C'est le résultat du dessin sur le canevas :

Portée du gradient

Il est important de comprendre l'intensité du dégradé. Si le dégradé commence à x = 10et s'étend à x = 110alors que seule la valeur x est comprise entre10à110pour que les graphiques situés dans cette zone aient une couleur de dégradé. Les graphiques dessinés en dehors de cette zone seront toujours affectés par le dégradé, mais utiliseront la première ou la dernière couleur du dégradé pour le dessin.
Par exemple, supposons qu'un dégradé commence à x = 150 et s'étend à x =350. Ce dégradé ira du bleu au vert. La valeur x est inférieure à150 dessinés tous les graphiques seront dessinés en bleu. La valeur x est supérieure à350 dessinés tous les graphiques seront dessinés en vert. Seuls les graphiques dont la valeur x est comprise entre150 et350 pour que les graphiques aient une couleur de dégradé.
Ceci est un exemple de code qui utilise le dégradé mentionné ci-dessus pour dessiner5un rectangle pour illustrer cela

<canvas id="ex3" width="500" height="250" style="border:　1px solide #cccccc;">
　　　　HTML5　Canvas non pris en charge
</canvas>
<script>
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d");
var linearGradient1　= context.createLinearGradient(150, 0,　350,0);
linearGradient1.addColorStop(0,　'rgb(0,　　　0,　255)');
linearGradient1.addColorStop(1,　'rgb(0,　255, 0)');
context.fillStyle = linearGradient1;
context.fillRect(10,10,130,　100);
context.fillRect(150,10,　200,　100);
context.fillRect(360,10,　130,　100);
context.fillRect(100,120,　150,　100);
context.fillRect(280,120,　150,　100);
</script>

C'est le résultat du dessin sur le canevas. Notez que seules les valeurs x150 à350 entre les graphiques pour avoir une couleur de dégradé, tandis que les autres graphiques sont complètement bleus (première étiquette de couleur) ou complètement verts (dernière étiquette de couleur).

Dans cet exemple, le dégradé est utilisé2couleurs, mais si vous utilisez3couleurs, l'effet est le même. En dehors de la zone de dégradé, utilisez uniquement les couleurs d'arrêt premières et dernières.
L'intensité du dégradé est importante pour comprendre correctement la coloration de la forme. Souvent, il peut être nécessaire de définir un dégradé spécifique pour chaque forme pour s'adapter à la zone de dessin de la forme.

Dégradé radial

Le type de dégradé radial est un motif circulaire qui s'étend de couleurs internes à une ou plusieurs autres couleurs. Voici quelques exemples graphiques:

La dégradé radial est définie par2un cercle défini. Chaque cercle a un point central et un rayon. Voici un exemple de code:

var　x1　=　100;　　　//　x of　1.circle center point
var　y1　=　100;　　　//　y of　1.circle center point
var　r1　=　30;　　　　//　radius of　1.circle
var　x2　=　100;　　　//　x of　2.circle center point
var　y2　=　100;　　　//　y of　2.circle center point
var　r2　=　100;　　　//　radius of　2.circle
var　radialGradient1　=　context.createRadialGradient(x1,　y1,　r1,　x2,　y2,　r2);
radialGradient1.addColorStop(0,　'rgb(0,　　　0,　255)');
radialGradient1.addColorStop(1,　'rgb(0,　255,　0)');
context.fillStyle = radialGradient;1;
context.fillRect(10,10,　200,　200);

Comme vous pouvez le voir, deux points centraux (x1, y1, et x2, y2). Et ils définissent deux rayons (r1et r2). Ces éléments sont passés en paramètres à createRadialGradient()2Fonction de Dcontext.
Il devrait y avoir deux cercles définis avec des rayons différents, de sorte qu'ils entraînent un cercle interne et un cercle externe (au moins en taille). Ensuite, les couleurs dans le dégradé s'étendront d'un cercle circulaire à l'autre.
Le fonctionnement des étiquettes de couleur est similaire à celui des dégradés linéaires. Elles définissent la couleur à utiliser dans le dégradé, ainsi que la couleur à placer dans la gamme de dégradé.
Les étiquettes de couleur ajoutées correspondront à un certain endroit entre les deux cercles. Par exemple, le premier paramètre 0 dans les arrêts de couleur signifie que la couleur commencera à partir de l'endroit où se trouve la première boule. Le premier paramètre1Il indique que la couleur commencera à partir de l'endroit où se trouve la deuxième boule.
C'est dans HTML5Résultat du code dessiné sur le canevas:

Si deux cercles ont le même point central, le dégradé sera parfaitement circulaire, et les couleurs évolueront du cercle interne au cercle externe. Si les points centraux des deux cercles sont différents, le dégradé sera plus ressemblant à une pyramide, comme la lumière projectée d'une lumière (non orthogonale à la surface). Voici un exemple de code similaire en forme de pyramide:

var　x1　=　100;
var　y1　=　100;
var　r1　=　30;
var　x2　=　150;
var　y2　=　125;
var　r2　=　100;
var　radialGradient1　=　context.createRadialGradient(x1,　y1,　r1,　x2,　y2,　r2);
radialGradient1.addColorStop(0,　'rgb(0,　　　0,　255)');
radialGradient1.addColorStop(1,　'rgb(0,　255,　0)');
context.fillStyle = radialGradient;1;
context.fillRect(10,10,　200,　200);

Voici l'aspect du dégradé dessiné sur le canvas: