css - 在 Canvas 上绘制渐变

Question

如何在 html Canvas 上绘制以下 alpha 渐变(参见示例图像)？

垂直白色 -> 黑色，左下角 45 度透明度 -> 右上角。

注意:我需要绘制它，而不是简单地引用背景图像。

Answer 1

您需要至少使用 2 个渐变。

• 灰色从左右垂直延伸，
• 黑色从下向上水平延伸

示例代码和演示:

时间不允许调整此演示以完全适合您的示例

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

var iw, ih, cw, ch;

var img = new Image();
img.onload = start;
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/transparency%20grid.png";

function start() {
  iw = cw = canvas.width = img.width;
  ih = ch = canvas.height = img.height;
  ctx.drawImage(img, 0, 0);

  // make gray gradient
  var gray = fillGradient(0, ch, cw, ch / 2, 'rgb(50,50,50)', 'transparent');
  // make black gradient
  var black = fillGradient(0, ch, 0, ch * .75, 'black', 'transparent');
}

function fillGradient(x0, y0, x1, y1, color0, color1) {
  var g = ctx.createLinearGradient(x0, y0, x1, y1);
  g.addColorStop(0.00, color0);
  g.addColorStop(1.00, color1);
  ctx.fillStyle = g;
  ctx.fillRect(0, 0, cw, ch);
  return (g);
}

body {
  background-color: white;
}
#canvas {
  border: 1px solid red;
}

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