我以前见过这个问题,但给出的答案是针对通过路径绘制的画布图像,但是我正在绘制图像。
是否有可能创建一个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
?
成分链
使用一系列的合成+绘制操作来获得内嵌阴影。
注意:该解决方案在创建时需要对画布元素进行独占访问,因此要么在屏幕外画布上执行此操作并绘制回主画布,要么如果可能的话,计划在生成后绘制辅助图形。
所需步骤:
- 在原始图像中绘制
- 使用实体反转 alpha 通道填充画布
xor
作品
- 定义阴影并将其自身拉回
- 停用阴影并在原始图像中绘制(
destination-atop
)
![Result](https://i.stack.imgur.com/sDwuU.png)
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)