Zeichnung Farbverlauf auf Leinwand

Question

Wie kann ich den folgenden Alpha-Farbverlauf (siehe Beispielbild) auf einem HTML-Canvas zeichnen?

Vertikal Weiß -> Schwarz, mit 45deg Transparenz unten links -> oben rechts.

Hinweis: Ich muss dies zeichnen, nicht einfach ein Hintergrundbild verweisen.

Answer 1

Sie werden mindestens zwei Steigungen verwenden müssen.

• grau sich vertikal von links und nach rechts,
• schwarz horizontal von unten nach oben erstreckt, und

Beispielcode und eine Demo:

Zeit ermöglicht nicht diese Zwicken Demo, um genau zu Ihrem Beispiel zu passen

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>