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

快来打我* 2022-10-06 10:50 170阅读 0赞

这样的事情没有直接的操作。在某些特殊情况下(即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;

\});

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关 js html 渐变透明度,JavaScript动画之透明度渐变

效果图 ![AAffA0nNPuCLAAAAAElFTkSuQmCC][] ![AAffA0nNPuCLAAAAAElFTkSuQmCC][] demo \\{ ma

淡淡的烟草味﹌/ 2022年10月07日 05:45/ 0 赞/ 227 阅读

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

这样的事情没有直接的操作。在某些特殊情况下(即colorpicker)，您可以使用两个单独的渐变来逃避。如果你想要每个角落任意颜色，你必须以像素为单位执行它。换句话说，对每

快来打我*/ 2022年10月06日 10:50/ 0 赞/ 171 阅读

相关 html画三个重叠的矩形,HTML5,JavaScript和在画布中绘制多个矩形

为什么我的多个矩形不会画在画布上？ Your browser doesn't support canvas. function Shape(x, y, w, h, fill

怼烎@/ 2022年10月06日 08:59/ 0 赞/ 191 阅读

相关 HTML径向效果,HTML5版径向渐变梯度色彩

![5268f80b9b1e01f982625ef6fac83ca1.png][] HTML5版径向渐变梯度色彩有个读者问我如何用HTML5生成一个径向梯度色彩效果，而不

布满荆棘的人生/ 2022年10月06日 07:56/ 0 赞/ 202 阅读

相关 html字体的渐变效果,神奇！js+CSS+DIV实现文字颜色渐变效果

本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果，供大家参考，具体内容如下下面是 CSS 部分代码： body\{ font:12px/1.5 Micro

约定不等于承诺〃/ 2022年10月06日 00:57/ 0 赞/ 377 阅读

相关 html5圆形渐变

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type

╰+攻爆jí腚メ/ 2022年09月25日 12:14/ 0 赞/ 183 阅读

相关 HTML5 Canvas 开发绘图方法整理【十、Canvas渐变、图形渐变&&文字渐变】

基础渐变三部曲：语法： 1、创建渐变对象 ctx.createLinearGradient(x0,y0,x1,y1); x0,y0 渐变开始点坐标 x1,y

╰+哭是因爲堅強的太久メ/ 2022年05月31日 09:49/ 0 赞/ 322 阅读

相关 canvas 颜色渐变

部分语法：createLinearGradient(0,0,250,150)代表其实坐标（0,0）代表终点坐标（250,150） addColorStop(0.5,"

系统管理员/ 2022年04月04日 13:54/ 0 赞/ 307 阅读

相关画布____渐变圆圈

直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

我就是我/ 2021年09月15日 15:02/ 0 赞/ 349 阅读

相关颜色渐变

公用代码 <view class="flex_w"> <view class="bgrc"> </view> </view> .fle

向右看齐/ 2021年07月25日 02:19/ 0 赞/ 534 阅读