HTML5キャンバス：イメージに複数のシャドウを使用する方法はありますか？

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>