HTML5 Canvas 4每个线条点都带有渐变的线条

Question

因为我从画布开始，我已经想出了如何做钻石形状，但现在我需要将钻石形状与每个角落的自定义渐变放在一起

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
var grd= ctx.createRadialGradient(0,0,1,0,0,150);

grd.addColorStop(0, "#ff737b");
grd.addColorStop(1, "#f78c21");

ctx.moveTo(25, 25); //1ª ponto esquerda
ctx.lineTo(100, 0); //2º ponto para direita
ctx.lineTo(75, 75); //3º ponto para baixo
ctx.lineTo(25, 75); //4º ponto para esquera
ctx.closePath();
ctx.fillStyle = grd;
ctx.fill();

<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

我需要这个就像这张照片

颜色是：

TopLeft = #ce2908
TopRight = #5a6bc6
BottomRight = #8c3173
BottomLeft = #f78c21

Answer 1

我会这样做：

• 创建4 linearGradients，对应于左上角，右上角，右下角和左下角角落。
• 让它们全部停在中间点（这里50,50 ）。
• 将最终stop-color更改为rgba中的相应值，并将alpha设置为0.1，因此，中心点几乎是透明的，所有中间颜色将混合在一起。

注意：
为避免形状的一般透明度，您可以先在其下面绘制白色形状。要在所有形状中实现完全透明，请将其第一个停止颜色更改为rgba(r,g,b,0.8)。

＆＃13;

＆＃13;

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');

var topLeft= ctx.createLinearGradient(25,25,50,50);
topLeft.addColorStop(0, "rgba(140, 49, 115, 1)");
topLeft.addColorStop(1, "rgba(140, 49, 115, .1)");

var topRight= ctx.createLinearGradient(100,25,50,50);
topRight.addColorStop(0, "rgba(90, 107, 198, 1)");
topRight.addColorStop(1, "rgba(90, 107, 198, .1)");

var bottomRight= ctx.createLinearGradient(75,75,50,50);
bottomRight.addColorStop(0, "rgba(247, 140, 33, 1)");
bottomRight.addColorStop(1, "rgba(247, 140, 33, .1)");

var bottomLeft= ctx.createLinearGradient(25,75,50,50);
bottomLeft.addColorStop(0, "rgba(206, 41, 8, 1)");
bottomLeft.addColorStop(1, "rgba(206, 41, 8, .1)");

ctx.beginPath();
ctx.moveTo(25, 25); //1ª ponto esquerda
ctx.lineTo(100, 0); //2º ponto para direita
ctx.lineTo(75, 75); //3º ponto para baixo
ctx.lineTo(25, 75); //4º ponto para esquera

/* // Uncomment to avoid transparency in the middle
  ctx.fillStyle = "#FFF";
  ctx.fill();
*/

ctx.fillStyle = bottomRight;
ctx.fill();
ctx.fillStyle = bottomLeft;
ctx.fill();
ctx.fillStyle = topLeft;
ctx.fill();
ctx.fillStyle = topRight;
ctx.fill();

＆＃13;

<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

＆＃13;

＆＃13;

＆＃13;