キャンバスに勾配を描画する

Question

htmlキャンバスに次のアルファグラデーション（例の画像を参照）を描画するにはどうすればよいですか？

垂直白 - >黒、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>