javascript - 4个 Angular 的html5 Canvas 渐变

Question

在二维空间中创建具有多个停靠点的渐变是否有某种技巧？我想做的是在我的 Canvas 上创建一个矩形，然后在每个 Angular 都有不同的颜色停止。

我尝试创建 4 个渐变，每个 Angular 一个，指向对 Angular 。 (尝试线性和圆形)。但这不会产生我想要的效果，因为中心总是以圆形方式变色。

我想要的效果类似于将 2 个线性水平渐变叠加在一起。然后是第三个垂直线性渐变，它不影响前两个渐变的颜色，只是在向下渐变时将底部渐变淡入顶部渐变。这样顶部的两个 Angular 是第一个线性渐变，底部的两个 Angular 是第二个线性渐变。

我试过使用 globalCompositeOperation，但我能实现的最接近的是 3 边渐变。不是 4.

我能想到的唯一方法是一次一行地构建我的矩形。每条线都有一个线性渐变，该渐变会被重新计算并稍微改变，以便它是绘制底线时的第二个渐变。但这似乎不是最有效(或最容易编程)的方法。

图片

我想我在这里太新了，无法链接到照片。但这是我的 google 照片上的 3 张图片的链接。

https://plus.google.com/photos/116764547896287695338/albums/6094993027344790369?authkey=CJnZ0I3JxbOMag

图片 1:第一个渐变(设置顶部两个 Angular 的颜色)

图2:Second Gradient(设置底部两个 Angular 的颜色)

图像 3:图像 1 和 2 垂直混合在一起，因此顶部的两种颜色逐渐淡入底部的两种颜色。

Answer 1

这种东西是没有直接操作的。在某些特殊情况下(即 colorpicker )，您可以使用两个单独的渐变。

如果你想要每个 Angular 的任意颜色，你将不得不以像素方式执行它。换句话说，对每个像素的 x 和 y 进行线性插值。我为 triangle gradients 做了类似的事情我自己。

与没有任何特殊变换的四个 Angular 变体相比会很简单。您只需遍历 Canvas 的每个 x 和 y，同时跟踪状态(每个像素两个 lerps)。

代码示例

HTML

<canvas id="canvas" width="300" height="300"></canvas>

JS

main();

function main() {
    var canvas = document.getElementById("canvas");

    quadGradient(canvas, {
      topLeft: [1, 1, 1, 1],
      topRight: [0, 0, 0, 1],
      bottomLeft: [0, 0, 0, 1],
      bottomRight: [1, 1, 1, 1]
    });
}

function quadGradient(canvas, corners) {
    var ctx = canvas.getContext('2d');
    var w = canvas.width;
    var h = canvas.height;
    var gradient, startColor, endColor, fac;

    for(var i = 0; i < h; i++) {
        gradient = ctx.createLinearGradient(0, i, w, i);
        fac = i / (h - 1);

        startColor = arrayToRGBA(
          lerp(corners.topLeft, corners.bottomLeft, fac)
        );
        endColor = arrayToRGBA(
          lerp(corners.topRight, corners.bottomRight, fac)
        );

        gradient.addColorStop(0, startColor);
        gradient.addColorStop(1, endColor);

        ctx.fillStyle = gradient;
        ctx.fillRect(0, i, w, i);
    }
}

function arrayToRGBA(arr) {
    var ret = arr.map(function(v) {
        // map to [0, 255] and clamp
        return Math.max(Math.min(Math.round(v * 255), 255), 0);
    });

    // alpha should retain its value
    ret[3] = arr[3];

    return 'rgba(' + ret.join(',') + ')';
}

function lerp(a, b, fac) {
    return a.map(function(v, i) {
        return v * (1 - fac) + b[i] * fac;
    });
}

JSbin