问题标签 [globalcompositeoperation]

我对 Kinetic JS 很陌生。我试图让一些 .globalCompositeOperation 在我拥有的项目的两个部分中工作，我尝试了几种可以在这里找到的解决方案，使用'drawFunc'和'sceneFunc'等......但到目前为止还没有运气。

项目的一部分我试图让“目的地”在 kinetic.Sprite 上工作：

"backgroundPainted" 是 Kinetic.Image

不幸的是，我在这里得到的只是在'backgroundPainted'之上动画的精灵层，但没有应用复合操作:(。

对于我拥有的第二个实例，它实际上非常相似，我只有 2 层，里面都有形状，添加到舞台上。我将相同的“sceneFunc”应用到顶部的图层，然后绘制它们。两个图层都显示，没有应用合成。:(

关于我应该看什么的任何指示？我看到例如“drawFunc”最近已更改为“sceneFunc”，也许还有其他一些变化，因为我已经尝试了几乎所有我可以在堆栈上找到的示例。

谢谢

I want to make a program works like photoshop. So I tried to modify the globalCompositeOperation to simulate the layer blending property

However, Kinetic.Context does not pass the globalCompositeOperation property to real contetx2d.

After trace the code http://pastebin.com/4neU7VF8 (link to modified kineticJs also included)

I modify the Kinetic.Context to allow such action.

And modify Kinetic.Node to make it remember what globalCompositeOperation it was settled.

And modify kinetic.Container.prototype._drawChildren to make it switch globalCompositeOperation of context automatically base on what globalCompositeOperation its child nodes desire.

After done that. it actually works in plain container such as a Kinetic.Layer contains several Kinetic.Shape

however it seems doesn't work in nested containers, such as a stage contains two layer and the top layer has the globalCompositeOperation attribute just like the layer contains red line in this http://jsbin.com/tumef/16/

Does anyone has idea, what did I miss?

multiply在 HTML 画布上绘图时，我需要使用混合模式：

我在最新的 Chrome/Firefox 中得到了预期的结果，但在 IE 11 中没有：它不会崩溃，但我得到的结果与未指定globalCompositeOperation属性时的结果相同。

如何以编程方式测试浏览器是否支持multiply混合模式？

所以我最近一直在玩粒子系统。我打算尝试制作一些烟花，在学习如何制作“小径”的过程中，我被卡住了。据我了解，如果我的填充样式为 rgba(0,0,0,0.5);，则 globalcompositeoperation 的destination-out 应该在画布上放置一个黑色透明图像。然而，奇怪的是，当我这样做时，它会将画布涂成白色。我不知道为什么或我在这里做错了什么。这是一支笔

我正在做的事情。不过，这只是我在使用全球复合材料，所以.......是的。

I'm new to canvas and I wanted to move my DOM (HTML+JS) animation to canvas. I tried to mimic the solar system animation in Basic animations - Web API Interfaces | MDN and I managed to do it. Fiddle.

I have a problem regarding the globalCompositeOperation. In the animation, earth is casting a shadow (low opacity rectangle), and when the moon is orbiting this dark area, moon should be under the shadow rectangle. If I use

at the top of draw function, I get the intended result (fiddle), but then moon and the earth rotates beneath the orbit lines. I don't want that. I want both the earth and the moon to be above the orbit lines, and moon to be beneath the shadow rectangle. Is there a way to do that? If not, I'm gonna have to get rid of the shadow.

I didn't use context.save() and context.restore() in my code, though they are used in the original animation. I'm not familiar with them. Might be related to my problem...

我正在尝试将文本绘制到具有特定 alpha 级别的画布上，然后剪辑文本并使用它自己的 alpha 级别绘制背景颜色：

我试过玩 globalCompositeOperation 和 beginPath 但我无法达到预期的结果。我还想避免 drawImage 和屏幕外画布，因为速度是一个主要问题。

Canvas 2D 使用 globalcompositeoperation 属性提供了以不同方式重叠图像的选项，如下所示http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_globalcompop

使用 texImage2D 函数渲染图像时，webgl 中是否有类似的选项？

Globalcomposite 在 html5 画布中可用。它在threejs中可用吗？如何在three.js中实现destination out复合操作？

谢谢你。

在查看了用于在 2D 画布上绘图的各种globalCompositeOperation 选项后，我想到destination-over这与默认值基本相同，source-over但元素是反向绘制的。

我想知道当画布计算合成并绘制像素时，是否有人知道这两个操作之间是否存在性能差异。

我在画布上使用“源输入”合成渐变蒙版，我想为蒙版形状和渐变的拉伸设置动画。这是合成代码，一个名为 的函数drawList：

stretch从 0 开始并使用 增加动画功能requestAnimationFrame，我已经验证了它在制作简单矩形甚至ctx.clearRect(300, 0, 1200 + stretch, 1000). 动画函数drawList在每次迭代和drawList.

drawList根据上面矩形的渐变填充从淡入淡出加载列表文本。我遇到的问题是，只要调用动画函数，画布就会被擦除并且不会重绘列表。我会使用 ctx.clip()，但我确实需要渐变填充来创建淡入淡出效果。

有任何想法吗？这是画布的限制吗？