Notes d'étude préliminaires de Html5 Canvas (9) - Dégradé

Cet article continue de présenter l'effet de dessin de html5 Différent de l'introduction précédente, le dégradé introduit dans cet article n'est pas une valeur d'état. Il s'agit du fillStyle Une valeur de. Regardons d'abord un exemple :

Le le code est le suivant :

var gradient = context.createLinearGradient(50,50,150,150);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

Il s'agit d'un dégradé linéaire. Créez d'abord un dégradé linéaire via

createLinearGradient Les quatre paramètres sont les coordonnées horizontales et verticales du point de départ. et les coordonnées horizontales et verticales du point final. Ajoutez ensuite les valeurs de couleur aux deux points, addColorStop's 0. est le point de départ, 1 est le point final, et le deuxième paramètre est la couleur, qui peut être rgb ou rgba.

Le précédent est un dégradé linéaire et un dégradé en arc. L'effet est le suivant :

Le code est le suivant :

createRadialGradient

var gradient = context.createRadialGradient(50,50,5,150,150,10);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

Les trois premiers paramètres sont les coordonnées horizontales et verticales du centre du cercle de départ et le rayon du cercle. Les trois derniers paramètres sont les suivants : les coordonnées du centre du cercle final et le rayon du cercle.

Utilisez un dégradé circulaire pour dessiner un dégradé en partant du centre. suit :

Le code est le suivant :

Le point de départ et le point final sont les centres des carrés, avec des rayons différents. Cet effet peut être créé.

var gradient = context.createRadialGradient(100,100,0,100,100,72);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

Ce qui précède est le contenu des notes d'étude préliminaires de Html5 Canvas (9) - Dégradé Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !