Verständnis HTML5 addColorStop() Methode Offset-Parameter

Ich lerne HTML5 Canvas Gradient. Ich habe verstanden, dass createLinearGradient(x,y,x1,y1) einen linearen Gradienten erstellt, der von (x, y) zu (x1, y1) beginnt. Aber von what I have read gibt es eine addColorStop(), die die Farbstopps und ihre Position entlang des Farbverlaufs angibt. Also diese Methode nimmt zwei Parameter, die Farbe, die ist einfach und ich habe verstanden, aber der andere Parameter, die Farbverlaufsposition, die den Wert zwischen 0 und 1 nimmt, ist, was ich nicht verstehe. Was gibt 0 an? Was spezifiziert 1? Ich suchte im Internet, konnte aber nichts finden, was ich verstehen konnte.Verständnis HTML5 addColorStop() Methode Offset-Parameter

Quelle

2017-12-19 azemda

Ich werde versuchen,

Gradient glatt Verschiebung auf eine andere Farbe von einer Farbe zu beantworten.

Beim Erstellen eines Farbverlaufs geben Sie Anfangspunkt, Endpunkt und Farbe an, die Sie hinzufügen möchten.

Im folgenden Beispiel wird angenommen, dass Sie einen linearen Gradientenstart von (0,0) bis (170,0) erstellen.

Dann beginnt grad.addColorStop(0,'#0000FF') von Anfang an und wenn Ihre nächste Anweisung ist grad.addColorStop(.2,'#00FF00'). Die erste Farbe endet bei 0,2% der Gradientenbreite (0,2% von 170) und die nächste Farbe beginnt bei 0,2% der Gradientenbreite.

Mit den Worten addColorStop sagen Sie ausdrücklich, dass Sie den Punkt der vorherigen Farbe stoppen sollen.

Überprüfen Sie diese example wo Gradient ist gleich, aber basierend auf Formposition Farbe ist anders.

// Create Gradient 
var grad=context.createLinearGradient(0,0,170,0); 

// Start at 0 end at 0.2 
grad.addColorStop(0,'#0000FF'); 

// Start at 0.2 end at 0.4 
grad.addColorStop(.2,'#00FF00'); 

// Start at 0.4 end at 0.6 
grad.addColorStop(.4,'#FFFF00'); 

// Start at 0.6 end at 0.8 
grad.addColorStop(.6,'#FF8800'); 

// Start at 0.8 end at 0.9 
grad.addColorStop(.8,'#FF0000'); 

//Start at 0.9 to rest all till end 
grad.addColorStop(0.9,'white');

var canvas = document.getElementById("canvas"); 
 
var context = canvas.getContext("2d"); 
 

 
var grad=context.createLinearGradient(0,0,170,0); 
 

 
grad.addColorStop(0,'#0000FF'); 
 

 
grad.addColorStop(.2,'#00FF00'); 
 

 
grad.addColorStop(.4,'#FFFF00'); 
 

 
grad.addColorStop(.6,'#FF8800'); 
 

 
grad.addColorStop(.8,'#FF0000'); 
 

 
grad.addColorStop(0.9,'white'); 
 

 
grad.addColorStop(1,'blue'); 
 

 
context.fillStyle = grad; 
 

 

 
context.fillRect(0,0,170,100); 
 
context.strokeRect(0,0,170,100) 
 

 
context.fillRect(80,200,300,100); 
 
context.strokeRect(80,200,300,100)

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <canvas id="canvas" width="500" height="500"></canvas> 
 
    
 
</body> 
 
</html>

Quelle

2017-12-19 09:00:10 Sumeet

In grad.addColorStop() Was bedeutet der erste Parameter? Die Zahl zwischen 0 und 1, was bedeutet es ?, ich bekomme diesen Teil nicht. – azemda

Es gibt an, welcher Teil aus dem Farbverlauf ausgewählt werden soll. Wenn Sie 0, 0,2,0,5 sagen, wird es wie 0 bis 0,2% Gradient und 0,2 bis 0,3% Gradient berechnet. Angenommen, die Farbverlaufsbreite ist 100 und dann 0-20, egal welche Farbe im Farbverlauf gewählt wird. – Sumeet

Verständnis HTML5 addColorStop() Methode Offset-Parameter

Antwort

Verwandte Themen