在画布上绘制渐变

Question

如何在html画布上绘制以下alpha渐变（参见示例图像）？

垂直白 - ＆gt;黑色，左下方有45度透明度 - ＆gt;右上角。

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

Answer 1

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

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

示例代码和演示：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;