javascript - 使用 CSS3 或 JS 用图案覆盖透明黑色剪影 PNG 的可见区域

标签 javascript jquery css vector overlay

我正在寻找一种方法来覆盖具有特定图案的透明黑色剪影 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/

相关文章:

javascript - Angular Firestore : Check if data exist and update a global variable based on that

javascript - 如何使用有关计数的信息获取对象数组中相同数据的计数

javascript - 如何使用 Jquery 动态克隆一个选项卡

css - 响应式粘性页脚菜单悬停效果

javascript - ajax/codeigniter 输出每 4 列创建一个新行

javascript - JavaScript 在 Web 应用程序的 MVC 模式中处于什么位置?

javascript - 图片完全加载后如何获取图片高度?

javascript - Javascript 中的 iOS 滑动删除按钮?

html - 在容器内水平对齐 3divs

css - 向右浮动列表组