Komplexe Form mit Regenbogen-Farbverlauf

Ich versuche, eine Figur auf einer Leinwand zu zeichnen, mit einem regenbogenfarbenen Farbverlauf gefüllt werden. Das gewünschte Ergebnis ist so etwas wie dieses:Komplexe Form mit Regenbogen-Farbverlauf

Erstellen der Form selbst ist recht einfach, nur einen Weg zu schaffen und Zeichnen der Linien. Es ist jedoch etwas schwieriger, sie tatsächlich mit einem Gradienten zu füllen, da nur radiale und lineare Gradienten unterstützt werden.

Die nächstgelegene wir bekommen haben, ist dies:

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var gradient=ctx.createLinearGradient(0,0,0,100); 
 
gradient.addColorStop (0, 'red'); 
 
gradient.addColorStop (0.25, 'yellow'); 
 
gradient.addColorStop (0.5, 'green'); 
 
gradient.addColorStop (0.75, 'blue'); 
 
gradient.addColorStop (1, 'violet'); 
 
ctx.moveTo(0,40); 
 
ctx.lineTo(200,0); 
 
ctx.lineTo(200,100); 
 
ctx.lineTo(0, 50); 
 
ctx.closePath(); 
 
ctx.fillStyle = gradient; 
 
ctx.fill();

<body onload="draw();"> 
 
    <canvas id="canvas" width="400" height="300"></canvas> 
 
</body>

Die graduellen Farben und so sind korrekt, aber der Gradient sollte natürlich mehr Dreiecksartig sein, anstatt rechteckig ist und abgeschnitten.

Quelle

2016-02-10 Fredrik Jonsén

Ich weiß nicht sicher, ob es funktioniert, aber ein Gedanke: Sie könnten ein regelmäßiges Rechteck machen, den Gradienten darauf setzen und es dann mit 'transform' skalieren und skalieren: https: //developer.mozilla .org/de-DE/docs/Web/API/Canvas_API/Tutorial/Transformationen # Transformiert – fredrover

Natives html5-Canvas bietet keine Möglichkeit, eine Seite einer Farbverlaufsfüllung zu strecken.

Aber es gibt eine Lösung:

Erstellen Sie Ihre Dehnungsgradient durch eine Reihe von vertikalen Linien Gradienten mit zunehmender Länge zu ziehen.

Dann können Sie Transformationen verwenden Ihre gestreckt Gradienten in den gewünschten Winkel zu zeichnen

Beispielcode und eine Demo:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var length=200; 
 
var y0=40; 
 
var y1=65 
 
var stops=[ 
 
    {stop:0.00,color:'red'}, 
 
    {stop:0.25,color:'yellow'}, 
 
    {stop:0.50,color:'green'}, 
 
    {stop:0.75,color:'blue'}, 
 
    {stop:1.00,color:'violet'}, 
 
]; 
 

 
var g=stretchedGradientRect(length,y0,y1,stops); 
 

 
ctx.translate(50,100); 
 
ctx.rotate(-Math.PI/10); 
 
ctx.drawImage(g,0,0); 
 

 

 
function stretchedGradientRect(length,startingHeight,endingHeight,stops){ 
 
    var y=startingHeight; 
 
    var yInc=(endingHeight-startingHeight)/length; 
 
    // create a temp canvas to hold the stretched gradient 
 
    var c=document.createElement("canvas"); 
 
    var cctx=c.getContext("2d"); 
 
    c.width=length; 
 
    c.height=endingHeight; 
 
    // clip the path to eliminate "jaggies" on the bottom 
 
    cctx.beginPath(); 
 
    cctx.moveTo(0,0); 
 
    cctx.lineTo(length,0); 
 
    cctx.lineTo(length,endingHeight); 
 
    cctx.lineTo(0,startingHeight); 
 
    cctx.closePath(); 
 
    cctx.clip(); 
 
    // draw a series of vertical gradient lines with increasing height 
 
    for(var x=0;x<length;x+=1){ 
 
     var gradient=cctx.createLinearGradient(0,0,0,y); 
 
     for(var i=0;i<stops.length;i++){ 
 
      gradient.addColorStop(stops[i].stop,stops[i].color); 
 
     } 
 
     cctx.beginPath(); 
 
     cctx.moveTo(x,0); 
 
     cctx.lineTo(x,y+2); 
 
     cctx.strokeStyle=gradient; 
 
     cctx.stroke(); 
 
     y+=yInc; 
 
    } 
 
    return(c); 
 
}

#canvas{border:1px solid red; margin:0 auto; }

<h4>Stretched gradient made from vertical strokes</h4> 
 
<canvas id="canvas" width=300 height=200></canvas>

Quelle

2016-02-10 17:09:10 markE

Komplexe Form mit Regenbogen-Farbverlauf

Antwort

Verwandte Themen