CSS konvertieren Farbverlauf in die Leinwand Version

Question

Ich habe einen Farbverlauf, den ich auf eine Leinwand anwenden muss.

section { 
 
    width: 440px; 
 
    height: 171px; 
 
    background-image: linear-gradient(185deg, #39adb2 0%, rgba(255, 255, 255, 0.24) 100%), linear-gradient(to top, rgba(152, 227, 230, 0.18) 0%, rgba(196, 229, 255, 0) 99%, rgba(196, 229, 255, 0) 100%); 
 
    opacity: 0.48; 
 
}

<section></section>

Ich brauche Hilfe diese auf die Leinwand API zu konvertieren; Ich habe keine Ahnung, wie es geht. Vielleicht gibt es ein Online-Tool?

var gradientFill = ctx.createLinearGradient(100, 10, 100, 100); 
    gradientFill.addColorStop(0, "#39adb2"); 
    gradientFill.addColorStop(0.99, "rgba(196, 229, 255, 0)"); 
    gradientFill.addColorStop(1, "rgba(196, 229, 255, 0)"); 
    gradientFill.addColorStop(0, "#39adb2"); 
    gradientFill.addColorStop(1, "rgba(152, 227, 230, 0.18)"); 

Answer 1

Hier ist, wie Sie die CSS Gradient auf Leinwand Version umwandeln kann ...

var ctx = document.querySelector('#canvas').getContext('2d'); 
 

 
var grd = ctx.createLinearGradient(0, 0, 0, 171); 
 
grd.addColorStop(0,"#39ADB2"); 
 
grd.addColorStop(0,"#98E3E6"); 
 
grd.addColorStop(1,"#FFFFFF"); 
 

 
ctx.fillStyle = grd; 
 
ctx.fillRect(0, 0, canvas.width, canvas.height);

<canvas id="canvas" width="440" height="171"></canvas>

Answer 2

Bitte versuchen Sie dies.

<canvas id='canvas' width='440' height='171' ></canvas> 
<script> 
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 
var grad = context.createLinearGradient(440,66,0,105); 

grad.addColorStop(0, 'rgba(196,230,255,1)'); 
grad.addColorStop(1, 'rgba(152,227,230,0.18)'); 

context.fillStyle = grad; 
context.fillRect(0, 0, 440,171); 
</script> 

Answer 3

Schnell Antwort wie ich Zeit habe, don `t die Mathematik zu erklären.

Der Winkel verlängert die Länge des Farbverlaufs, da er in die Ecken passen muss. Um zu finden, lösen Sie ein Dreieck, das die diagonale Mittellinie des Gradienten ist.

Ich habe den Farbverlauf geändert, um zu zeigen, dass es mit einer schwarzen Anfangsmitte und einem Ende passt. Ich bin mir sicher, dass Sie auf den gewünschten Farbverlauf wechseln können.

Bild zeigt Vars. Finden Sie Länge von hypt, verwenden Sie das, um fromTopRight zu finden, und verwenden Sie das, um diag zu finden. Dist vom Zentrum ist len = hypt + diag. Siehe Code für Schritt für Schritt.

var ctx = canvas.getContext("2d"); 
 
var w = canvas.width; 
 
var h = canvas.height; 
 
var cx = w/2; 
 
var cy = h/2; 
 
var cssAng = 185; 
 
var canAng = cssAng - 90; 
 
var ang = (canAng - 90) * (Math.PI/180); 
 
var hypt = cy/Math.cos(ang); 
 
var fromTopRight = cx - Math.sqrt(hypt * hypt - cy * cy); 
 
var diag = Math.sin(ang) * fromTopRight; 
 
var len = hypt + diag; 
 

 
var topX = cx + Math.cos(-Math.PI/2 + ang) * len; 
 
var topY = cy + Math.sin(-Math.PI/2 + ang) * len; 
 
var botX = cx + Math.cos(Math.PI/2 + ang) * len; 
 
var botY = cy + Math.sin(Math.PI/2 + ang) * len; 
 

 
var grad = ctx.createLinearGradient(topX,topY,botX,botY); 
 
grad.addColorStop(0, 'rgba(0,0,0,1)'); 
 
grad.addColorStop(0.01, 'rgba(196,230,255,1)'); 
 
grad.addColorStop(0.49, 'rgba(196,230,255,1)'); 
 
grad.addColorStop(0.50, 'rgba(0,0,0,1)'); 
 
grad.addColorStop(0.51, 'rgba(196,230,255,1)'); 
 
grad.addColorStop(0.99, 'rgba(152,227,230,1)'); 
 
grad.addColorStop(1, 'rgba(0,0,0,1)'); 
 

 
ctx.fillStyle = grad; 
 
ctx.fillRect(0, 0, 440,171);

canvas { 
 
    border : 1px solid black; 
 
}

<canvas id="canvas" width = 440 height = 171></canvas>