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>