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

Question

我可以使用createLinearGradient() 绘制颜色过渡，但这对horizontally or vertically 都有效。

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

编辑：考虑以下代码：

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

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

Answer 1

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

var addColorStops = function(row, gradient, sharpness){
  var colWidth = 1/row.length, step = 1/(row.length-1);
  gradient.addColorStop(0, row[0]);
  for(var i=0; i<row.length; ++i){
    if(i==0){
      if(sharpness > 0)gradient.addColorStop(colWidth*sharpness, row[i]);
    }else if(i == row.length-1){
      if(sharpness > 0)gradient.addColorStop(1-(colWidth*sharpness), row[i]);
    }else{
      if(sharpness > 0)gradient.addColorStop(step*i-colWidth/2*sharpness, row[i]);
      gradient.addColorStop(step*i, row[i]);
      if(sharpness > 0)gradient.addColorStop(step*i+colWidth/2*sharpness, row[i]);
    }
  }
  gradient.addColorStop(1, row[row.length-1]);
}
var drawRow = function(ctx, canvas, row, sharpness){
  var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
  addColorStops(row, gradient, sharpness)
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}
var drawMask = function(ctx, canvas, matrix, rowIndex, sharpness){
  var mask = ctx.createLinearGradient(0, 0, 0, canvas.height);
  addColorStops(matrix.map(function(row,i){return i==rowIndex?'rgba(255,255,255,0)':'rgba(255,255,255,1)'}), mask, sharpness)
  ctx.fillStyle = mask;
  ctx.globalCompositeOperation = 'destination-out';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = 'source-over';
}
var drawMatrixGradient = function(matrix, sharpness){
  sharpness = Math.min(1, Math.max(0, sharpness||0))
  var onscreen = document.getElementById('canvas');
  var ctx = onscreen.getContext('2d');
  var offScreen = document.createElement('canvas');
  offScreen.width = onscreen.width;
  offScreen.height = onscreen.height;
  var ctx2 = offScreen.getContext('2d');
  
  //Draw the first row
  drawRow(ctx, onscreen, matrix[0], sharpness)
  
  //Now draw the rest
  for(var i=1; i<matrix.length; ++i){
    drawRow(ctx2, offScreen, matrix[i], sharpness)
    drawMask(ctx2, offScreen, matrix, i, sharpness);
    ctx.drawImage(offScreen, 0, 0, canvas.width, canvas.height);
  }
}


drawMatrixGradient([['red','green','blue'],['yellow','purple','orange'],['magenta','aqua','white']], 0.5)

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