HTML5 canvas：有沒有辦法在圖像上使用多個陰影？

Question

我想加上我的性格有些視覺效果。 https://i.stack.imgur.com/LPSvT.png

正如你所看到的，它有多個陰影。

我使用下面的代碼：

context.shadowColor = 'rgba(180,0,0,0.6)'; 
context.shadowOffsetX = -20; 
context.shadowOffsetY = 0; 
context.shadowBlur = 3; 

context.shadowColor = 'rgba(180,0,0,0.6)'; 
context.shadowOffsetX = -40; 
context.shadowOffsetY = 0; 
context.shadowBlur = 3; 

context.drawImage(img, x, y, width, height, dx, dy, width, height); 

，但只有最後則shadowColor作品。 有沒有辦法使用多個陰影與畫布？ 我是否正確？如果沒有，實現這一目標的常用方法是什麼？ 請，任何幫助，將不勝感激。

Answer 1

您可以通過每次使用新的陰影設置繪製圖像來做到這一點，但由於您還會反覆繪製原始圖像，所以會變髒，再加上陰影計算量大，所以不要做到這一點。

相反，你可以計算在屏幕外的畫布上你的影子之前手，只有使主之一，您希望您的陰影出現在這個畫布。

var img = new Image(); 
 
img.onload = init; 
 
img.src = "https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png"; 
 
var w, h; 
 
var ctx = c.getContext('2d'); 
 
ctx.imageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.msImageSmoothingEnabled = ctx.webkitImageSmoothingEnabled = false; 
 
var shadowCan = c.cloneNode(); 
 
shadowCtx = shadowCan.getContext('2d'); 
 

 
function init() { 
 
    w = shadowCan.width = img.width; 
 
    h = shadowCan.height = img.height; 
 
    w *= 1.5; // my image is a bit small for the demo 
 
    h *= 1.5; 
 
    // init the shadow once 
 
    shadowCtx.globalCompositeOperation = 'source-over'; 
 
    shadowCtx.fillStyle = "red"; 
 
    shadowCtx.fillRect(0, 0, c.width, c.height); 
 
    shadowCtx.globalCompositeOperation = 'destination-in'; 
 
    shadowCtx.drawImage(img, 0, 0); 
 
    // Now, every non-transparent pixels of our image is red 
 
    draw(); 
 
} 
 

 
function draw() { 
 
    var maxX = (c.width - w * 2); 
 
    for (var x = 0; x < maxX; x += w/2) { 
 
    // simply change the alpha at each iteration 
 
    ctx.globalAlpha = (w/maxX) * (x/w); 
 
    ctx.drawImage(shadowCan, x, 20, w, h); // draw the shadows 
 
    } 
 
    ctx.globalAlpha = 1; // reset the alpha 
 
    ctx.drawImage(img, x, 20, w, h); // draw our original image 
 
}

canvas { 
 
    background: pink; 
 
}

<canvas id="c"></canvas>