Guide de référence HTML

Recueil complet des étiquettes HTML

Méthode createRadialGradient() sur HTML canvas

createRadialGradient() est une méthode de Canvas 2L'API D détermine les coordonnées de deux cercles en fonction des paramètres, trace une gradation radioactive et retourne CanvasGradient.

Référence du manuel HTML canvas

Exemple en ligne

Dessinez un rectangle et utilisez un gradient radial/Remplissage en gradient circulaire :

Exemple

!DOCTYPE html>
<html>
<head>
<title>Utilisation de la méthode createRadialGradient() sur HTML canvas (Tutoriel de base du site oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne supporte pas HTML5　l'élément canvas.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
var　grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
</script>
</body>
</html>

Voyons un test ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome et Safari supportent createRadialGradient() méthode.

Remarque :Internet Explorer 8 et les versions précédentes ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode createRadialGradient() crée un dégradé/Objet de dégradé circulaire.
La dégradé peut être utilisé pour remplir des rectangles, des cercles, des lignes, du texte, etc.

Avis :Utilisez cet objet commestrokeStyle ou fillStyle la valeur de l'attribut.

Avis :Utilisez addColorStop() La méthode spécifie différentes couleurs et où ces couleurs sont positionnées dans l'objet gradient.

Syntaxe JavaScript :	context.createRadialGradient(x0,y0,r0,x1,y1,r1);

Valeur du paramètre

Paramètres	Description
x0	Coordonnée x du cercle de début de dégradé
y0	Coordonnée y du cercle de début de dégradé
r0	Rayon du cercle de début
x1	Coordonnée x de fin du cercle de dégradé
y1	Coordonnée y de fin du cercle de dégradé
r1	Rayon de fin du cercle

Référence du manuel HTML canvas

HTML: <template> balise