HTML5キャンバス画像のインセットシャドウ

Question

私はこの質問を以前に見ましたが、パスを経由して描画されたキャンバス画像の回答がありますが、画像を描画しています。

inset-shadowを作成することはできますか？

context.shadowOffsetX = 0; 
context.shadowOffsetY = 0; 
context.shadowBlur = 10; 
context.shadowColor = 'rgba(30,30,30, 0.4)'; 

var imgOne = new Image(); 
imgOne.onload = function() { 
    context.drawImage(imgOne, 0, 0); 
}; 
imgOne.src = "./public/circle.png"; 

だから私は円の絵を描きます。私は今、円の外側にわずかな影ができました。offsetではなく、これをどうすればinsetにすることができますか？

Answer 1

キャンバスK3Nが彼の正解で示したように、あなたは裏返し画像を変えることができますので、不透明から透明にどこ画像の変更をシャドウします（不透明を透明&その逆になります）ので、影が円の内側に描かれています。

サークルの中心点と半径を知っている場合は、ストロークパスを使用してインセットサークルシャドウを作成できます。ここでは例です：

var canvas=document.getElementById("canvas"); 
 
var context=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
context.beginPath(); 
 
context.arc(cw/2,ch/2,75,0,Math.PI*2); 
 
context.fillStyle='lightcyan'; 
 
context.fill(); 
 

 
context.globalCompositeOperation='source-atop'; 
 

 
context.shadowOffsetX = 500; 
 
context.shadowOffsetY = 0; 
 
context.shadowBlur = 15; 
 
context.shadowColor = 'rgba(30,30,30,1)'; 
 

 
context.beginPath(); 
 
context.arc(cw/2-500,ch/2,75,0,Math.PI*2); 
 
context.stroke(); 
 
context.stroke(); 
 
context.stroke(); 
 

 
context.globalCompositeOperation='source-over';

<canvas id="canvas" width=300 height=300></canvas>

あなたのパスは、数学的に定義することが不規則またはハードであれば、あなたもエッジパス検出アルゴリズムを使用することができます。一般的なエッジパスアルゴリズムの1つはMarching Squaresです。 StackoverflowのK3Nは素晴らしいMarching Squares algorithmをコードしています。

Answer 2

コンポジションチェーン

一連の合成+描画操作を使用して、挿入シャドウを取得します。

注：ソリューションは、キャンバス要素を作成するときに排他的にアクセスする必要がありますので、オフスクリーンキャンバスでこれを行い、メインに描画するか、可能であれば、これが生成された後に描画される

必要なステップは：固体使用xor組成

影を定義し、バック

無効影でそれ自体を描画キャンバスを充填

• 描画原画像における
• 反転アルファチャンネル元画像を描画する（destination-atop）

K3Nの答えに触発さ

var ctx = c.getContext("2d"), img = new Image; 
 
img.onload = function() { 
 

 
    // draw in image to main canvas 
 
    ctx.drawImage(this, 0, 0); 
 

 
    // invert alpha channel 
 
    ctx.globalCompositeOperation = "xor"; 
 
    ctx.fillRect(0, 0, c.width, c.height); 
 

 
    // draw itself again using drop-shadow filter 
 
    ctx.shadowBlur = 7*2; // use double of what is in CSS filter (Chrome x4) 
 
    ctx.shadowOffsetX = ctx.shadowOffsetY = 5; 
 
    ctx.shadowColor = "#000"; 
 
    ctx.drawImage(c, 0, 0); 
 

 
    // draw original image with background mixed on top 
 
    ctx.globalCompositeOperation = "destination-atop"; 
 
    ctx.shadowColor = "transparent";     // remove shadow ! 
 
    ctx.drawImage(this, 0, 0); 
 
} 
 
img.src = "http://i.imgur.com/Qrfga2b.png";

<canvas id=c height=300></canvas>

Answer 3

、私はこの正確な状況のためInset.jsを作成しました！

挿入。JS

のみ例えばctx.shadowInset = true;

を設定する必要があります。http://codepen.io/patlillis/pen/ryoWey

var ctx = canvas.getContext('2d'); 
var img = new Image; 
img.onload = function() { 
    ctx.shadowInset = true; 
    ctx.shadowBlur = 25; 
    ctx.shadowColor = "#000"; 
    ctx.drawImage(this, 0, 0); 
} 
img.src = "http://i.imgur.com/Qrfga2b.png";