globalCompositeOperation [destination-out]的画布阴影

Question

..您好，经过一段漫长的时间，我再次有机会使用JavaScript和canvas。

在这里，我尝试使用画布[ globalCompositeOperation ]绘制透明图像，这对我有很大帮助，我在绘制image [img1]上获得了成功，并删除了image [img2]的重叠部分。

搜索很多但失败了：想在画布的输出上添加阴影，如下所示，

请查看并给我您的宝贵建议或解决方案。

 $('.bg').one("load", function() { var canvas = document.getElementById('canva'), context = canvas.getContext('2d'), img1 = $('.bg')[0], img2 = $('.bgover')[0]; context.drawImage(img1, 0, 0); context.globalCompositeOperation = 'destination-out'; context.beginPath(); context.drawImage(img2, 10, 10); context.closePath(); //drop shadow -> Doesn't work context.shadowBlur = 5; context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowColor = "black"; }); 

 body { background: #E7FF00 } .bg { background: url() center; width: 300px; height: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <img class='bg' src="http://www.qdtricks.org/wp-content/uploads/2015/02/hd-wallpapers-for-mobile.jpg" style='display:none'> <img class='bgover' src="http://spotremoval.coit.com/sites/spotremoval.coit.com/files/styles/stain_sidebar/public/Feces%20Stain%20Removal%20-%20SPOT%20REMOVAL%20GUIDE.png?itok=j6f96IHQ" style='display:none'> <canvas id="canva" width="400" height="400" style="position:absolute;left:0;top:0"></canvas> 

Answer 1

带有目标输出和顶部源的内部阴影

这是我的解决方案。 加载图像，然后创建具有2D上下文的副本，以便可以将其绘制到该副本。 然后创建一个更大一点的第二个图像，以容纳阴影，偏移和模糊。 使它成为带有comp destination-out的反向掩码。 设置原始图像的阴影设置。 然后在顶部用comp source-atop绘制遮罩图像

现在，图像具有阴影，可以绘制在所需位置。

函数innerShadow（image，col，offX，offY，blur）完成工作。 代码已注释，请尽情享受:)

 /** CanvasCtx.js begin **/ var canvas = document.getElementById("canV"); var ctx = canvas.getContext("2d"); /** CanvasCtx.js end **/ // copies an image adding the 2d context function copyImage(img){ var image = document.createElement("canvas"); image.width = img.width; image.height = img.height; image.ctx = image.getContext("2d"); image.ctx.drawImage(img,0,0); return image; } // creates a blank image with 2d context var createImage = function(w,h){ var image = document.createElement("canvas"); image.width = w; image.height =h; image.ctx = image.getContext("2d"); return image; } // load an image from URL. Create a editable copy and then // call the function ready var loadImage = function(url,ready){ function onload(){ this.removeEventListener("load",onload); image = copyImage(this); ready(image); } var image = new Image(); image.src = url; image.addEventListener("load",onload); } function innerShadow(image,shadowCol,offX,offY,blur){ var mx, my, img1; // create a mask image, with pixel alpha the invers of original // Needs to be bigger so that the shadow is consistant at edges img1 = createImage(image.width+Math.abs(offX)+blur,image.height+Math.abs(offY)+blur); // set the shadow colur to requiered but only for alising the edge img1.ctx.fillStyle = shadowCol; img1.ctx.fillRect(0,0,img1.width,img1.height); // fill the mask img1.ctx.globalCompositeOperation = "destination-out"; // remove dest pixels mx = img1.width/2- image.width/2; // recalculate offsets my = img1.height/2- image.height/2; // draw it 3 times to remove the slight alpha edge bleading img1.ctx.drawImage(image,mx,my); // cut out the images shape from mask img1.ctx.drawImage(image,mx,my); // cut out the images shape from mask img1.ctx.drawImage(image,mx,my); // cut out the images shape from mask // set up shadow settings image.ctx.shadowColor = shadowCol; image.ctx.shadowOffsetX = offX; image.ctx.shadowOffsetY = offY; image.ctx.shadowBlur = blur; // draw the mask with the shadow on original image image.ctx.globalCompositeOperation = "source-atop"; // only visible pixels image.ctx.drawImage(img1,-mx,-my); // draw the shadow } // clear the canvas ctx.clearRect(0,0,canvas.width,canvas.height) // load and add shadow. var imageWithInnerShadow; var shadowOffX = 10; var shadowOffY = 10; var shadowBlur = 10; var shadowCol = "Black"; // load the image loadImage("http://i.stack.imgur.com/Jafta.png",function(img){ // add the shadow innerShadow(img,shadowCol,shadowOffX,shadowOffY,shadowBlur); ctx.drawImage(img,20,20); // show that it worked imageWithInnerShadow = img; // hold the image for use }) 

 .canC { width:500px; height:500px;} 

 <canvas class="canC" id="canV" width=500 height=500></canvas> 

Answer 2

这是一个具有所需效果的dropShadow函数。

 $('.bg').one("load", function() { var canvas = document.getElementById('canva'), context = canvas.getContext('2d'), img1 = $('.bg')[0], img2 = $('.bgover')[0]; context.drawImage(img1, 0, 0); context.save(); context.globalCompositeOperation = 'destination-out'; context.drawImage(img2, 10, 10); context.restore(); dropShadow(canvas, "red", 5, 2, 2); }); // This function draws the image to left of canvas // leaving only the shadow then draws the shadow in the // empty space. function dropShadow(can, color, blur, offsetX, offsetY) { var s_can = document.createElement('canvas'); var s_ctx = s_can.getContext('2d'); var ctx = can.getContext('2d'); var w = can.width; var h = can.height; s_can.width = w; s_can.height = h; s_ctx.shadowBlur = blur; s_ctx.shadowColor = color; s_ctx.shadowOffsetX = w; s_ctx.shadowOffsetY = 0; s_ctx.drawImage(can, 0, 0, w, h,-w,0,w,h); ctx.save(); ctx.globalCompositeOperation = 'destination-over'; ctx.drawImage(s_can, offsetX, offsetY); ctx.restore(); } 

 body { background: #E7FF00 } .bg { background: url() center; width: 300px; height: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <img class='bg' src="http://www.qdtricks.org/wp-content/uploads/2015/02/hd-wallpapers-for-mobile.jpg" style='display:none'> <img class='bgover' src="http://spotremoval.coit.com/sites/spotremoval.coit.com/files/styles/stain_sidebar/public/Feces%20Stain%20Removal%20-%20SPOT%20REMOVAL%20GUIDE.png?itok=j6f96IHQ" style='display:none'> <canvas id="canva" width="400" height="400" style="position:absolute;left:0;top:0"></canvas>