问题标签 [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.
javascript - 如何剪辑/使用 globalCompositeOperation = "desination-out" 从我的画布中排除 2 个圆圈？
我试图弄清楚CanvasRenderingContext2D.globalCompositeOperation = "destination-out以创建“战争迷雾”效果。
鉴于这个例子
https://jsfiddle.net/wobzpjLL/
如何创建两个不包括黑色覆盖的圆圈，以便用户可以在这两个圆圈内看到绿色背景和线条，其他地方都是黑色（因此产生战争迷雾效果）？
javascript - 在 KonvaJS 上使用带有 globalCompositeOperation 的图像掩码？
我正在使用 Konva.js 框架并尝试在另一个框架上应用图像蒙版。代码完全复制自这篇文章。在这个jsfiddle 示例中，有一些小的修改来添加背景（矩形）。
问题是背景没有正确绘制。要在代码中查看它的实际效果，有一行注释/取消注释（以查看实际问题）。有人有什么想法来实现这一目标吗？
最好的
javascript - 各种 globalCompositeOperation 模式的 WebGL 等效项是什么？
使用 2d 画布时，我可以使用 globalCompositeOperation 设置各种混合模式。WebGl/OpenGl 可以使用混合模式进行类似的合成操作，但它的操作更加难以理解。我想要一些关于重现此处看到的各种效果的指导：https ://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
有人知道这样的参考吗？或者我什至可以看一些渲染源代码，因为我想浏览器可能会在后台使用 OpenGl。
fabricjs - 擦除 Fabric JS 上的线条
我正在使用 FabricJS 在图像顶部绘制和擦除线条。我为画布做了两层，底层作为背景图像，顶层用于素描。每当我擦除标记时，如果我使用 freeDrawingBrush.color =white 或任何基本颜色，它就会被擦除。但是，如果我使用透明的 'rgba(0,0,0,0)' 作为 freeDrawingBrush 的颜色，则不会擦除标记。
如何擦除顶层上的标记，透明作为我擦除时创建的路径的背景？
我在 html https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js上使用fabricjs
任何帮助将不胜感激。提前致谢！
html5-canvas - 画布 globalCompositeOperation 源输入和目标输入不能与多个源和目标一起使用
HTML5 Canvas globalCompositeOperation 值 source-in 和 destination-in 不适用于多个源图像和目标图像。该操作导致空白画布。globalCompositeOperation 的所有其他值都有效..
让我知道我正在做的方式是否有问题或者是错误？谢谢..
fabricjs - 如何使用fabric js仅通过覆盖矩形打孔？
我正在使用fabric js 1.7.22版开发图像裁剪器。通常，每个裁剪器都会在图像上显示黑色透明覆盖层（图像看起来很暗淡），并且还显示一个 Rect。（裁剪图像看起来充满颜色的区域）。
fabric.Rect我们可以使用带有背景图像和对象的织物 js 创建此功能。
我的问题是，当我使用GlobalCompositeOperationwithdestination-out属性来fabric.Rect反对时。它会在画布上打洞。
简单来说：
当我添加globalCompositeOperation到时destination-out，它也会在画布上打洞。
画布的预期结果：
画布的当前结果：
我制作了一个代码笔进行演示： https ://codepen.io/mayurkukadiya0/pen/zYYWOGL?editors=0110
我发现一个代码笔也可以做同样的事情，但是它们添加了多个画布以在单独的图层中显示图像并在单独的图层中进行矩形和叠加有没有办法做到这一点，而无需在画布后面添加外部任何画布或 css 图像？这是参考：https ://codepen.io/s0nnyv123/pen/eravaN
graphics - 如何计算强光复合混合模式的逆？
我在客户端上有一个“旧”RGBA 画布，在服务器上有一个相同图像的更新版本。它们之间存在细微的视觉差异。
我希望服务器能够向客户端发送一些“差异”，以便能够更新它的图像以匹配新版本，而不必再次发送整个图像数据。
两帧透明 webm 视频将是理想的（即使用 webm 对差异进行编码），但对具有透明度的 webm 的硬件支持非常糟糕，并且浏览器对从视频中提取特定帧的支持也很差。
相反，我正在考虑使用强光混合模式，这应该允许我将单个图像发送到客户端，并将任何 RGBA 像素转换为任何其他像素（误差幅度为 1）。
我应该如何生成差异图像？diff如果可以生成哪种混合模式组合new = hardlight(old, diff)
javascript - 画布上的 fillText 一直在背景后面
我正在使用 ctx.globalCompositeOperation = 'destination-over'。虽然文字仍然落后。
“新的 [KEYWORDS]”是填充或绘制文本/组件/图像的功能。请帮忙！
canvas - 是否可以在两个形状之间应用 clip() 或 globalCompositeOperation()，然后停止剪辑/合成？
我想渲染一个红色方块，然后在蓝色方块和石灰方块之间应用 globalCompositeOperation = 'source-in'，然后恢复“正常”渲染，即不应用剪切/合成。我怎样才能做到这一点？我让它工作的唯一方法是在彼此之上渲染多个画布，并在单独的画布中应用剪辑/合成。
在这个fiddle中，第二个画布直观地显示了我所追求的效果。
javascript - 如何使用 globalCompositeOperation 绘制不同的图像
我最近尝试使用图块制作世界地图游戏，因此，我希望图像具有不同的颜色，例如，将图块作为国家的颜色。那么，globalCompositeOperation 将相同的颜色应用于所有图像，我做错了什么？我认为问题出在 fillRect(0, 0, Canvas.width, Canvas.height) 中，因为它是画布的大小，并且适用于所有图像，但我认为将正方形设为大小图像的它不会有用，因为边框的某些部分会与该框发生碰撞。
顺便说一句，这是代码：