自从我从 Canvas 开始,我已经弄清楚如何制作菱形形状,但现在我需要从每个 Angular 开始使用自定义渐变来放置菱形形状
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
最佳答案
我会让它像这样:
- 创建 4 linearGradients ,对应于您的左上角、右上角、右下和左下 Angular 。
- 让它们全部停在中间点(这里
50,50
)。 - 更改最终结果
stop-color
到rgba
中的相应值,将 alpha 设置为0.1
因此,中心点几乎是透明的,所有中间颜色都会混合在一起。
注意:
为了避免形状一般透明,您可以先在其下方绘制一个白色形状。要允许所有形状完全透明,请将其第一个停止颜色更改为类似 rgba(r,g,b,0.8)
的颜色。 .
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();
<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>
关于javascript - HTML5 Canvas 4 条线,每个线点上有渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31191347/