Forma complessa con sfumatura arcobaleno

Sto provando a disegnare una figura su una tela, da riempire con una sfumatura arcobaleno. Il risultato desiderato è qualcosa di simile:Forma complessa con sfumatura arcobaleno

Creare la forma in sé è abbastanza semplice, basta creare un percorso e disegnare le linee. Tuttavia, in realtà riempirlo con un gradiente sembra essere un po 'più difficile, in quanto sembra supportato solo gradienti radiali e lineari.

Il più vicino ho ottenuto è questo:

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>

I colori di pendenza e sono tali corretto, ma il gradiente dovrebbe ovviamente essere più triangolare simile, piuttosto che essere rettangolare e ritagliata.

fonte

2016-02-10 Fredrik Jonsén

Non so per certo se funzionerà, ma un pensiero: puoi creare un rettangolo regolare, posizionare il gradiente e quindi inclinarlo e ridimensionarlo usando 'transform': https: //developer.mozilla .org/it-IT/docs/Web/API/Canvas_API/Tutorial/Trasformazioni # Transforms – fredrover

La tela nativa HTML5 non ha un modo per allungare un lato di un riempimento sfumato.

Ma c'è una soluzione:

Crea il gradiente tratto disegnando una serie di linee gradiente verticale con una lunghezza sempre maggiore.

Quindi è possibile utilizzare le trasformazioni per disegnare il gradiente allungato al vostro angolo desiderato

codice di esempio e una 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>

fonte

2016-02-10 17:09:10 markE

Forma complessa con sfumatura arcobaleno

risposta

Problemi correlati