问题标签 [globalcompositeoperation]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
65 浏览

javascript - 将滤色器添加到图像的暗部分,将另一个滤色器添加到图像的亮部分?

我的挑战是在图像的暗部分添加滤色器,在图像的亮部分添加另一个滤色器。要达到这样的效果https://imgur.com/a/cGmJbs9

我正在使用具有 globalCompositeOperation 效果的画布,但我只能应用一个过滤器而不影响另一个过滤器。

这非常适合根据 globalCompositeOperation 将颜色过滤器应用于黑暗或明亮区域,但如果我添加另一个过滤器,它也会改变前一个过滤器的颜色。

任何想法?

谢谢啤酒

0 投票
0 回答
36 浏览

javascript - Canvas JS 和透明度:透过剪裁的形状看

问题是:我想在一个形状中制作一个透明的孔,所以我使用复合模式:destination-out,它允许用第二个形状移除形状的一部分。

在单一形状上没问题。

但是当多个“钻孔”形状重叠时,就没有透明效果了。我知道这是因为这是 globalComposite 和 js canvas 的工作方式......但是,有解决方案吗?我尝试了 clip() 和各种复合选项,但没有找到。

这是预期的结果: https ://i.stack.imgur.com/leVfB.png

这是一个简化的工作 JSFiddle:https ://jsfiddle.net/7y5utsz0/

感谢您提供任何解决方案!

0 投票
1 回答
18 浏览

javascript - 使用 globalCompositeOperation = 'source-in' 时清除 Canvas

我正在带面具的画布上画一张脸。仅在面罩已满的情况下,脸部才会出现。

它工作正常,但我想在拖动时移动脸部。所以我需要重置画布,然后重新绘制脸部。但是当我这样做时

我得到一个空白画布,并且在调用 resetCanvas 后 drawface 函数不再起作用。我也尝试过保存和重置,但找不到有效的解决方案。有人可以帮忙吗?谢谢 !