Javascript CSS将渐变转换为画布版本

我有一个梯度，我需要应用到画布上

部分{
宽度：440px；
高度：171像素；
背景图像：线性梯度（185deg，#39adb2 0%，rgba（255，255，0.24）100%），线性梯度（顶部，rgba（152，227，230，0.18）0%，rgba（196，229，255，0）99%，rgba（196，229，255，0）100%）；
不透明度：0.48；
}

---

请试试这个。

var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var grad=context.createLinearGradient（0,0,0171）；
渐变加色停止（0，'rgba（196230255,1'）；
渐变色停止（1，'rgba（255255,1'）；
context.fillStyle=grad；
fillRect（0,044017）
请试试这个。


var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var grad=context.createLinearGradient（0,0,0171）；
渐变加色停止（0，'rgba（196230255,1'）；
渐变色停止（1，'rgba（255255,1'）；
context.fillStyle=grad；
fillRect（0,044017）
以下是如何将CSS渐变转换为画布版本


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）
以下是如何将CSS渐变转换为画布版本


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）
快速回答，因为我没有时间解释数学

该角度延伸渐变的长度，因为它必须适合拐角。求解一个三角形，该三角形是渐变的对角线中心线

我已经改变了梯度，以显示它适合一个黑色的开始中心和结束。我相信你可以改变到你需要的梯度


图中显示了变量。查找
hypt
的长度，使用该长度从右上方查找
，然后使用该长度查找
diag
。距离中心的距离是
len=hypt+diag
。请参阅代码以逐步了解


var ctx=canvas.getContext（“2d”）；
var w=画布宽度；
var h=画布高度；
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=数学sin（ang）*自右上角；
var len=hypt+诊断；
var topX=cx+Math.cos（-Math.PI/2+ang）*len；
变量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）；
渐变加色停止（0，'rgba（0,0,0,1'）；
渐变加色停止（0.01，'rgba（196230255,1'）；
渐变加色停止（0.49，'rgba（196230255,1'）；
渐变加色停止（0.50，'rgba（0,0,0,1'）；
渐变加色停止（0.51，'rgba（196230255,1'）；
渐变加色停止（0.99，'rgba（152227230,1'）；
渐变加色停止（1，'rgba（0,0,0,1'）；
ctx.fillStyle=梯度；
ctx.fillRect（0,044017）
画布{
边框：1px纯黑；
}
快速回答，因为我没有时间解释数学

该角度延伸渐变的长度，因为它必须适合拐角。求解一个三角形，该三角形是渐变的对角线中心线

我已经改变了梯度，以显示它适合一个黑色的开始中心和结束。我相信你可以改变到你需要的梯度


图中显示了变量。查找
hypt
的长度，使用该长度从右上方查找
，然后使用该长度查找
diag
。距离中心的距离是
len=hypt+diag
。请参阅代码以逐步了解


var ctx=canvas.getContext（“2d”）；
var w=画布宽度；
var h=画布高度；
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=数学sin（ang）*自右上角；
var len=hypt+诊断；
var topX=cx+Math.cos（-Math.PI/2+ang）*len；
变量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）；
渐变加色停止（0，'rgba（0,0,0,1'）；
渐变加色停止（0.01，'rgba（196230255,1'）；
渐变加色停止（0.49，'rgba（196230255,1'）；
渐变加色停止（0.50，'rgba（0,0,0,1'）；
渐变加色停止（0.51，'rgba（196230255,1'）；
渐变加色停止（0.99，'rgba（152227230,1'）；
渐变加色停止（1，'rgba（0,0,0,1'）；
ctx.fillStyle=梯度；
ctx.fillRect（0,044017）
画布{
边框：1px纯黑；
}
您希望通过编程还是手动完成？我只需要使用addColorStop函数将CSS版本转换为画布版本。您希望通过编程还是手动完成？我只需要使用addColorStop函数将CSS版本转换为画布版本。我刚刚编辑了我的答案，请查看此答案@ng2userIt很接近，缺少底部的白色。仍然需要帮助吗？缺少底部的白色。现在完成了。我刚刚编辑了我的答案，请查看此@ng2userIt很近，底部的白色缺失。你还需要帮助吗？底部的白色缺失。现在完成了。谢谢。我怎样才能扩大空白？谢谢。我怎样才能扩大空白？