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 px div元素

Example

现在我需要在移动角落时进行转换

有人有个主意吗？

Answer 1

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

现在由你决定

在正确的时间使用正确的功能（命名约定函数是sideA_To_sideB所以rightToUp意味着右边会最终找到sideA并且最终会找到sideB - side 是头或尾）
让它跨浏览器（如果你是那种东西）
将头部和尾部四舍五入将是一个很好的接触（理想情况下，这种四舍五入只会发生垂直和水平部分）

随意更改尺寸变量以满足您的需求。

编辑 - 根据您刚添加的图片，我创建了这个：jsfiddle http://jsfiddle.net/Lbydhhkh/。这是使用旋转线性梯度完成的。我仍然认为使用我原来的方法看起来更好，更有意义。这应该足以让你朝着正确的方向前进。伪代码仍可用于此新代码。

＆＃13;

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

＆＃13;

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

＆＃13;

此外还有一些伪代码可以帮助您调用相应的函数

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
}

如何创建弯曲渐变？

1 个答案: