Javascript 如何使用画布渐变绘制矩阵？

我可以使用

createLinearGradient（）

绘制颜色过渡，但这也可以

现在我有了一个矩阵，其中每个单元格都包含一个颜色代码。如何用渐变色绘制整个矩阵

< >编辑：考虑下面的代码：

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    var grd = ctx.createLinearGradient(0, 0, 170, 0);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "green");

    ctx.fillStyle = grd;
    ctx.fillRect(20, 20, 150, 50);

    grd = ctx.createLinearGradient(0, 0, 170, 0);
    grd.addColorStop(0, "blue");
    grd.addColorStop(1, "yellow");

    ctx.fillStyle = grd;
    ctx.fillRect(20, 70, 150, 50);

---

我正在绘制第一个渐变（红色->绿色），然后是第二个渐变（蓝色->黄色）。但我想看到的过渡也从红色->蓝色和绿色->黄色。有可能吗？

您可以渲染需要在屏幕外混合的任何渐变，然后更改合成操作以在其上绘制遮罩。然后，将其复制回屏幕画布上。请参见下面的示例。我创建了一个函数，可以将二维颜色数组作为矩阵传递，并创建了一个锐度设置，用于定义渐变混合的紧密程度。（0是相邻颜色之间的完全混合，1是相邻颜色之间的硬线）

var addColorStops=函数（行、渐变、锐度）{
var colWidth=1/行长，步长=1/（行长-1）；
gradient.addColorStop（0，行[0]）；
对于（var i=0；i0）gradient.addColorStop（colWidth*锐度，行[i]）；
}else if（i==行长度-1）{
如果（锐度>0）渐变。添加颜色停止（1-（colWidth*锐度），第[i]行）；
}否则{
如果（锐度>0）渐变。添加颜色停止（步长*i-colWidth/2*锐度，行[i]）；
gradient.addColorStop（步骤*i，行[i]）；
如果（锐度>0）渐变。添加颜色停止（步长*i+colWidth/2*锐度，行[i]）；
}
}
gradient.addColorStop（1，行[row.length-1]）；
}
var drawRow=函数（ctx、画布、行、清晰度）{
var gradient=ctx.createLinearGradient（0,0，canvas.width，0）；
添加颜色停止（行、渐变、锐度）
ctx.fillStyle=渐变；
ctx.fillRect（0，0，canvas.width，canvas.height）；
}
var drawMask=函数（ctx、画布、矩阵、行索引、锐度）{
var mask=ctx.createLinearGradient（0,0,0，canvas.height）；
addColorStops（matrix.map（函数（行，i）{return i==行索引？'rgba（255255,0）:'rgba（255255,1）}），掩码，锐度）
ctx.fillStyle=遮罩；
ctx.globalCompositeOperation='destination out'；
ctx.fillRect（0，0，canvas.width，canvas.height）；
ctx.globalCompositeOperation='source over'；
}
var drawMatrixGradient=函数（矩阵，锐度）{
锐度=数学最小值（1，数学最大值（0，锐度| | 0））
屏幕上的var=document.getElementById（'canvas'）；
var ctx=onscreen.getContext（'2d'）；
var offScreen=document.createElement（'canvas'）；
offScreen.width=屏幕上的.width；
offScreen.height=屏幕上的.height；
var ctx2=offScreen.getContext（'2d'）；
//画第一行
绘图行（ctx，屏幕上，矩阵[0]，清晰度）
//现在把剩下的画出来
对于（var i=1；i您可以渲染需要在屏幕外混合的任何渐变，然后更改合成操作以在其上绘制遮罩。然后，将其复制回屏幕画布上。请参见下面的示例。我创建了一个函数，在该函数中，您可以传递二维颜色数组作为矩阵，以及定义与m的紧密程度的锐度设置使用渐变混合。（0表示相邻颜色之间的完全混合，1表示相邻颜色之间的硬线）


var addColorStops=函数（行、渐变、锐度）{
var colWidth=1/行长，步长=1/（行长-1）；
gradient.addColorStop（0，行[0]）；
对于（var i=0；i0）gradient.addColorStop（colWidth*锐度，行[i]）；
}else if（i==行长度-1）{
如果（锐度>0）渐变。添加颜色停止（1-（colWidth*锐度），第[i]行）；
}否则{
如果（锐度>0）渐变。添加颜色停止（步长*i-colWidth/2*锐度，行[i]）；
gradient.addColorStop（步骤*i，行[i]）；
如果（锐度>0）渐变。添加颜色停止（步长*i+colWidth/2*锐度，行[i]）；
}
}
gradient.addColorStop（1，行[row.length-1]）；
}
var drawRow=函数（ctx、画布、行、清晰度）{
var gradient=ctx.createLinearGradient（0,0，canvas.width，0）；
添加颜色停止（行、渐变、锐度）
ctx.fillStyle=渐变；
ctx.fillRect（0，0，canvas.width，canvas.height）；
}
var drawMask=函数（ctx、画布、矩阵、行索引、锐度）{
var mask=ctx.createLinearGradient（0,0,0，canvas.height）；
addColorStops（matrix.map（函数（行，i）{return i==行索引？'rgba（255255,0）:'rgba（255255,1）}），掩码，锐度）
ctx.fillStyle=遮罩；
ctx.globalCompositeOperation='destination out'；
ctx.fillRect（0，0，canvas.width，canvas.height）；
ctx.globalCompositeOperation='source over'；
}
var drawMatrixGradient=函数（矩阵，锐度）{
锐度=数学最小值（1，数学最大值（0，锐度| | 0））
屏幕上的var=document.getElementById（'canvas'）；
var ctx=onscreen.getContext（'2d'）；
var offScreen=document.createElement（'canvas'）；
offScreen.width=屏幕上的.width；
offScreen.height=屏幕上的.height；
var ctx2=offScreen.getContext（'2d'）；
//画第一行
绘图行（ctx，屏幕上，矩阵[0]，清晰度）
//现在把剩下的画出来
对于（var i=1；i