Question

..大家好，经过长时间的差距，我再次有机会使用JavaScript和画布。

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

搜索很多但失败了： 想尝试在画布输出上投下阴影，如下图所示，

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

＆＃13;

$('.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";


});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

带有目的地的内部阴影＆amp;源顶上

这是我的解决方案。加载图像然后创建一个带有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功能。

＆＃13;

$('.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();
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用globalCompositeOperation [destination-out]的画布阴影

2 个答案: