Javascript 如何创建弯曲渐变？

我正在用Javascript编写snake。对于不同身体部位的背景，我使用以下渐变生成：

gibGradient: function() {
    var string = "background: linear-gradient(to right, rgba(243,226,199,1) 15%,rgba(193,158,103,1) "+ snake.data.gradientLinks +"%,rgba(182,141,76,1) "+ snake.data.gradientRechts +"%,rgba(233,212,179,1) 90%);";
    if ((snake.data.gradientLinks < 85) && (snake.data.modus == "hochzaehlen")) {
        snake.data.gradientLinks = snake.data.gradientLinks + 5;
        snake.data.gradientRechts = snake.data.gradientRechts + 5;
        if (snake.data.gradientLinks >= 85) {
            snake.data.modus = "runterZaehlen";
        }
    }

    if ((snake.data.gradientLinks > 20) && (snake.data.modus == "runterZaehlen")) {
        snake.data.gradientLinks = snake.data.gradientLinks - 5;
        snake.data.gradientRechts = snake.data.gradientRechts - 5;
        if (snake.data.gradientLinks <= 20) {
            snake.data.modus = "hochzaehlen";
        }
    }
    return string;
},

gradient:function（）{
var string=“背景：线性梯度（向右，rgba（243226199,1）15%，rgba（193158103,1）”+snake.data.gradientLinks+”%，rgba（182141,76,1）”+snake.data.gradientRechts+“%，rgba（2332179,1）90%）；
如果（（snake.data.gradientLinks<85）和&（snake.data.modus==“hochzaehlen”））{
snake.data.gradientLinks=snake.data.gradientLinks+5；
snake.data.gradientRechts=snake.data.gradientRechts+5；
如果（snake.data.gradientLinks>=85）{
snake.data.modus=“runterZaehlen”；
}
}
如果（（snake.data.gradientLinks>20）&&（snake.data.modus==“runterZaehlen”））{
snake.data.gradientLinks=snake.data.gradientLinks-5；
snake.data.gradientRechts=snake.data.gradientRechts-5；
if（snake.data.gradientLinks我花时间编写了一些实用javascript函数，您可能会发现它们很有用。但是它们需要使用jQuery库。创建弯曲渐变的最佳方法是使用偏移径向渐变。这与边界半径相结合，可以获得非常好的效果

现在由你来决定


在正确的时间使用正确的功能（的命名约定
函数是sideA_到sideB的，所以rightoup意味着向右走
最终找到sideA，向上走最终会找到sideB-sides
（头或尾）
让它跨浏览器（如果你喜欢这类东西）
头部和尾部的圆化是一种很好的方式（理想情况下，这种圆化只会在
垂直和水平部分）

请随意更改大小变量以满足您的需要

编辑-根据您刚才添加的图像，我创建了这个：jsfiddle。这是使用旋转线性渐变完成的。我仍然认为使用我原来的方法看起来更好，更有意义。但这应该足以让您找到正确的方向。伪代码仍然可以用于新代码


var size=40；
函数aToB（梯度）{
返回$（“”）。css({
宽度：大小，
高度：尺寸，
背景：梯度，
位置：“绝对”
});
}
函数半径（x、y、角）{
var css={}；
css[“边框-”+拐角+“-半径”]=大小/2；
返回aToB([
“径向梯度（“，
大小，
“px at”，
x,，
“px”，
Y
“px，红色，蓝色）”].join（“”）.css（css）；
}
函数半径（x，y，角）{
var css={}；
css[“边框-”+拐角+“-半径”]=大小/2；
返回aToB([
“径向梯度（“，
大小，
“px at”，
x,，
“px”，
Y
“px，蓝色，红色）”].join（“”）.css（css）；
}
函数downToUp（）{
返回aToB（“线性梯度（向左，红色，蓝色）”）；
}
函数rightToLeft（）{
返回aToB（“线性梯度（至底部，红色，蓝色）”）；
}
函数uptown（）{
返回aToB（“线性梯度（向右，红色，蓝色）”）；
}
函数leftToRight（）{
返回aToB（“线性梯度（到顶部，红色，蓝色）”）；
}
函数右（）{
返回半径（大小，0，“左下”）；
}
函数leftToUp（）{
返回半径（0,0，“右下”）；
}
函数downToLeft（）{
返回半径（0，大小，“右上”）；
}
函数rightToDown（）{
返回半径（大小，大小，“左上”）；
}
函数rightToUp（）{
返回半径（尺寸，0，“左下”）；
}
函数左上（）{
返回半径（0，0，“右下”）；
}
函数leftToDown（）{
返回半径（0，大小，“右上”）；
}
函数downToRight（）{
返回半径（尺寸，尺寸，“左上”）；
}
$（函数（）{
//内在的
$（“body”）.append（upToDown（）.css({
顶部：尺寸，
左：0
})).append（upToRight（）.css）({
顶部：尺寸*2，
左：0
})).append（leftToRight（）.css({
顶部：尺寸*2，
左：尺寸
})).append（leftToUp（）.css({
顶部：尺寸*2，
左：尺寸*2
})).append（downToUp（）.css({
顶部：尺寸，
左：尺寸*2
})).append（downToLeft（）.css({
排名：0，
左：尺寸*2
})).append（rightToLeft（）.css({
排名：0，
左：尺寸
})).append（rightToDown（）.css({
排名：0，
左：0
}));
//外
$（“body”）.append（leftToDown（）.css({
排名：0，
左：尺寸*5
})).append（upToDown（）.css({
顶部：尺寸，
左：尺寸*5
})).append（upToLeft（）.css({
顶部：尺寸*2，
左：尺寸*5
})).append（rightToLeft（）.css({
顶部：尺寸*2，
左：尺寸*4
})).append（rightToUp（）.css({
顶部：尺寸*2，
左：尺寸*3
})).append（downToUp（）.css({
顶部：尺寸*1，
左：尺寸*3
})).append（downtRight（）.css({
排名：0，
左：尺寸*3
})).append（leftToRight（）.css({
排名：0，
左：尺寸*4
}));
})；
渐变方向是哪个方向，垂直于或平行于蛇的纵轴？一张图像会有所帮助。也许一个简单的
径向渐变
可以解决你的问题。你能提供一张你的意思的图片吗？你在使用画布或其他元素吗？你可以对角点使用径向渐变，你可以设置s然后根据哪个角点调整偏移，当你说“不工作”时，你可以通过包括度
线性渐变（45度，红色，蓝色）；
来旋转渐变，你的意思是说它不符合你的要求吗？因为代码在任何支持css3 Gradients的现代浏览器中都可以工作。是的，很抱歉，这就是我想说的，代码本身工作得很好，但如果不构建全新的潜行逻辑，我就无法使用它。我刚刚看到了你包含的图像并更新了我的答案……我相信我回答了主要问题还有一个问题是“我怎样才能创造一个弯曲的梯度？”同样，在做游戏的时候，你应该至少有两个循环在运行