我正在寻找一种方法来覆盖具有特定图案的透明黑色剪影 PNG 文件的可见区域。
是否有 CSS、JavaScript 的混合解决方案?
示例:我有一张武器剪影图片和一组迷彩图案,我想将其覆盖在武器上。
演示:在 Photoshop 中,选择图层蒙版 > 叠加时会得到相同的结果。
Ps: 我的问题类似于这个线程:Silhouette a PNG image using CSS除了我正在寻找完全相反的东西。
最佳答案
您可以使用将 globalCompositeOperation 设置为 destination-in 的 Canvas 来执行此操作。例如
var canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = 'silhouette.png';
}
img.src = 'pattern.jpg';
document.body.appendChild(canvas);
关于javascript - 使用 CSS3 或 JS 用图案覆盖透明黑色剪影 PNG 的可见区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23587669/