如何创建弯曲的渐变？

Question

我正在用Javascript编写蛇。对于不同的身体部位的背景下，我使用以下梯度代：

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; 
}, 

我的问题是，当蛇移动并改变方向，梯度需要弯曲，以适应在过去的身体部位在角落结束之前和蛇的直线之后的​​最后。

例如：

进出口使用10x10像素的div元素

现在我需要转变其移动角落

任何人有一个想法是什么时候？

Answer 1

我花时间写了一些实用JavaScript函数，您可能会发现它们很有用。但是，它们需要使用jQuery库。创建弯曲渐变的最佳方法是使用偏移径向渐变。这与边界半径相结合使得效果非常好。

现在是你来

• 使用正确的功能在正确的时间（的 功能的命名约定是sideA_To_sideB所以rightToUp意味着我们要正确将 最终找到SIDEA和上升最终会找到sideB - 双方 是头部或尾部）
• 使其跨浏览器（如果你到诸如此类的事情）
• 四舍五入的头部和尾部将是一个很好的接触（理想情况下该舍入只会发生在 垂直和水平部分）

随意更改大小变量以满足您的需求。

编辑 - 基于您刚刚添加的图像我创建了这个：jsfiddle http://jsfiddle.net/Lbydhhkh/。这是使用旋转线性渐变完成的。我仍然认为使用我的原创方法看起来更好，更合理。这应该足以让你朝着正确的方向发展。伪代码仍然可以用于此新代码。

var size = 40; 
 

 
function aToB(gradient) { 
 
    return $("<div>").css({ 
 
     width: size, 
 
     height: size, 
 
     background: gradient, 
 
     position: "absolute" 
 
    }); 
 
} 
 

 
function radialOut(x, y, corner) { 
 
    var css = {}; 
 
    css["border-" + corner + "-radius"] = size/2; 
 
    return aToB([ 
 
     "radial-gradient(", 
 
    size, 
 
     "px at ", 
 
    x, 
 
     "px ", 
 
    y, 
 
     "px, red, blue)"].join("")).css(css); 
 
} 
 

 
function radialIn(x, y, corner) { 
 
    var css = {}; 
 
    css["border-" + corner + "-radius"] = size/2; 
 
    return aToB([ 
 
     "radial-gradient(", 
 
    size, 
 
     "px at ", 
 
    x, 
 
     "px ", 
 
    y, 
 
     "px, blue, red)"].join("")).css(css); 
 
} 
 

 
function downToUp() { 
 
    return aToB("linear-gradient(to left, red, blue)"); 
 
} 
 

 
function rightToLeft() { 
 
    return aToB("linear-gradient(to bottom, red, blue)"); 
 
} 
 

 
function upToDown() { 
 
    return aToB("linear-gradient(to right, red, blue)"); 
 
} 
 

 
function leftToRight() { 
 
    return aToB("linear-gradient(to top, red, blue)"); 
 
} 
 

 
function upToRight() { 
 
    return radialIn(size, 0, "bottom-left"); 
 
} 
 

 
function leftToUp() { 
 
    return radialIn(0, 0, "bottom-right"); 
 
} 
 

 
function downToLeft() { 
 
    return radialIn(0, size, "top-right"); 
 
} 
 

 
function rightToDown() { 
 
    return radialIn(size, size, "top-left"); 
 
} 
 

 
function rightToUp() { 
 
    return radialOut(size, 0, "bottom-left"); 
 
} 
 

 
function upToLeft() { 
 
    return radialOut(0, 0, "bottom-right"); 
 
} 
 

 
function leftToDown() { 
 
    return radialOut(0, size, "top-right"); 
 
} 
 

 
function downToRight() { 
 
    return radialOut(size, size, "top-left"); 
 
} 
 

 
$(function() { 
 
    //inner 
 
    $("body").append(upToDown().css({ 
 
     top: size, 
 
     left: 0 
 
    })).append(upToRight().css({ 
 
     top: size * 2, 
 
     left: 0 
 
    })).append(leftToRight().css({ 
 
     top: size * 2, 
 
     left: size 
 
    })).append(leftToUp().css({ 
 
     top: size * 2, 
 
     left: size * 2 
 
    })).append(downToUp().css({ 
 
     top: size, 
 
     left: size * 2 
 
    })).append(downToLeft().css({ 
 
     top: 0, 
 
     left: size * 2 
 
    })).append(rightToLeft().css({ 
 
     top: 0, 
 
     left: size 
 
    })).append(rightToDown().css({ 
 
     top: 0, 
 
     left: 0 
 
    })); 
 

 
    //outer 
 
    $("body").append(leftToDown().css({ 
 
     top: 0, 
 
     left: size * 5 
 
    })).append(upToDown().css({ 
 
     top: size, 
 
     left: size * 5 
 
    })).append(upToLeft().css({ 
 
     top: size * 2, 
 
     left: size * 5 
 
    })).append(rightToLeft().css({ 
 
     top: size * 2, 
 
     left: size * 4 
 
    })).append(rightToUp().css({ 
 
     top: size * 2, 
 
     left: size * 3 
 
    })).append(downToUp().css({ 
 
     top: size * 1, 
 
     left: size * 3 
 
    })).append(downToRight().css({ 
 
     top: 0, 
 
     left: size * 3 
 
    })).append(leftToRight().css({ 
 
     top: 0, 
 
     left: size * 4 
 
    })); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

另外这里是一些伪帮助你调用适当的功能

while(nextPart()) { //while there are more parts to process 
    var prev = getPrev(), //returns null or previous part 
     curr = getCurrent(), //returns current part 
     next = getNext(), //returns null or next part 
     a, b, part = []; 

    //get the direction towards the tail 
    if(prev) a = curr.getDirectionTo(prev); //returns "up", "right", "down", or "left" 
    else a = tail.getOppositeDirection(); //returns "up", "right", "down", or "left" 

    //get the direction towards the head 
    if(next) b = curr.getDirectionTo(next); 
    else b = head.getDirection(); //returns "up", "right", "down", or "left" 

    b = upperCaseFirstLetter(b); 

    if(!prev) part.push("tail"); //is this a tail? 
    if(!next) part.push("head"); //is this a head? 

    //the following line of code calls a function with the form "aToB" 
    //the variable part does not do anything yet but it can help the called 
    //function determine if this part is a head, tail, or both for rounding 
    var domElement = window[a + "To" + b](part); 
    domElement.css(curr.position()); //properly position the element 
    $("#container").append(domElement); //add the element to the container 
}