html一个矩形两种颜色渐变,html5画布渐变在4个角落

这样的事情没有直接的操作。在某些特殊情况下(即colorpicker)，您可以使用两个单独的渐变来逃避。

如果你想要每个角落任意颜色，你必须以像素为单位执行它。换句话说，对每个像素在x和y上进行线性插值。我自己为triangle gradients做了类似的事。

与没有任何特殊转换的四角变体相比，这很简单。你只需要遍历画布的每个x和y，同时跟踪状态(每个像素两个lerps)。

代码示例

HTML

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;

});

}