嵌入陰影在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"; 

因此，我畫了圓形圖片。現在我現在在圈子外面有一個輕微的陰影，我怎麼能得到這個inset而不是offset？

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>

如果您的路徑是不規則的或難以界定數學，你還可以使用邊緣路徑檢測算法。一種常見的邊緣路徑算法是Marching Squares。 Stackoverflow的K3N編碼了一個不錯的Marching Squares algorithm。

Answer 2

構圖鏈

使用一系列複合+繪製操作來獲得插入陰影。

注意：解決方案在創建時需要對canvas元素的獨佔訪問權限，因此要麼在離屏畫布上執行此操作並退回到main，要麼在可能的情況下計劃在生成後繪製輔助圖形。

的所需的步驟：

• 繪製在原始圖像
• 反轉alpha通道填充有固體使用xor組合物
• 定義陰影和繪製自身回
• 停用陰影畫布並繪製出原始圖像（destination-atop）

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

通過K3N的回答啓發，我創建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";