Quels dégradés existe-t-il dans Canvas ?

Les dégradés dans Canvas incluent des dégradés linéaires et des dégradés radiaux. Introduction détaillée : 1. Le dégradé linéaire définit la direction et la plage du dégradé à travers le segment de ligne entre deux points. Vous pouvez utiliser la méthode "Canvas' createLinearGradient()" pour créer un objet dégradé linéaire et utiliser la méthode "addColorStop()". pour le définir. La couleur et la position du dégradé ; 2. Le dégradé radial définit la forme et la plage du dégradé à travers un point central et un rayon, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur Dell G3.

Dans Canvas, nous pouvons utiliser des dégradés pour créer des effets graphiques plus riches et plus diversifiés. Le dégradé peut être appliqué aux remplissages et aux traits pour ajouter des transitions de couleur aux éléments graphiques. Il existe deux principaux types de dégradés dans Canvas : les dégradés linéaires et les dégradés radiaux.

Dégradé linéaire :

Le dégradé linéaire définit la direction et la plage du dégradé à travers le segment de ligne entre deux points. Nous pouvons utiliser la méthode createLinearGradient() de Canvas pour créer un objet dégradé linéaire et utiliser la méthode addColorStop() pour définir la couleur et la position du dégradé.

Par exemple, le code suivant crée un dégradé linéaire du coin supérieur gauche au coin inférieur droit, avec le dégradé de couleur du rouge au bleu :

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 创建线性渐变对象
var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
// 设置渐变颜色
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
// 使用渐变作为填充
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

Dégradé radial (Dégradé radial) :

Un dégradé radial passe via un point central et un rayon qui définit la forme et l'étendue du dégradé. Nous pouvons utiliser la méthode createRadialGradient() de Canvas pour créer un objet dégradé radial et utiliser la méthode addColorStop() pour définir la couleur et la position du dégradé.

Par exemple, le code suivant crée un dégradé radial du rouge intérieur au bleu extérieur :

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 创建径向渐变对象
var gradient = ctx.createRadialGradient(canvas.width/2, canvas.height/2, 0, canvas.width/2, canvas.height/2, canvas.width/2);
// 设置渐变颜色
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
// 使用渐变作为填充
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

En plus des dégradés linéaires et radiaux de base mentionnés ci-dessus, Canvas prend également en charge des formes de dégradés plus complexes, telles que les dégradés répétitifs et les paramètres de transparence. pour les arrêts de couleur. Il peut être ajusté et combiné selon les besoins spécifiques pour créer des effets de dégradé plus diversifiés.

Pour résumer, les dégradés linéaires et les dégradés radiaux peuvent être utilisés dans Canvas pour ajouter des effets de transition de couleur aux éléments graphiques. Un dégradé linéaire utilise un segment de ligne entre deux points pour définir la direction et la plage du dégradé, tandis qu'un dégradé radial utilise un point central et un rayon pour définir la forme et la plage du dégradé. En définissant différentes couleurs et positions, vous pouvez créer des effets de dégradé riches et diversifiés, améliorant ainsi l'attrait visuel de vos graphiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!