问题标签 [globalcompositeoperation]

当我尝试在 Chrome 中使用 globalCompositeOperation 来遮罩/混合形状和文本（形状遮罩/与其他形状混合效果很好）时遇到了一个问题（更具体地说，我使用的是 Chrome 12.0.7）。谁能建议我在这里可能误入歧途的地方或在画布元素中建议一种解决方法？

这是显示我所看到的图像：http: //i.stack.imgur.com/wRunv.jpg

下面是重现这些结果的代码：

我正在尝试创建一个动画来清除（如橡皮擦）图像顶部的矩形填充。当圆圈动画时，它会清除它所覆盖的所有区域。

我可以使用 globalCompositeOperation 来做到这一点，但是当我尝试减慢动画速度时，它不起作用。我正在尝试 setTimeout 函数。任何想法为什么动画没有放慢速度？我已经尝试了我所知道的一切，任何帮助或替代方法将不胜感激。

此外，当我尝试使用 setTimeout(func(),time in ms) 函数时，它也会删除图像。

完整代码：

帆布测试

对于 google+ 反馈，它如何在不剪切 html 页面的情况下“剪切”其黑色叠加层（白色矩形）来为其反馈创建突出显示效果？在这篇文章中，Google+ 反馈系统的屏幕截图部分是如何工作的？，我知道高亮和黑屏是<div>标签和<canvas>标签。

我在这个网站http://hertzen.com/experiments/jsfeedback/examples/combination/index.html找到了一个类似的反馈，它的高亮效果也是 <div> 标签并且它使用了 CSS。但是，它的白色矩形堆叠在黑色覆盖层之上，而不是“切开”它。因此，亮点并不像谷歌那样清晰。关于谷歌的反馈突出显示功能如何工作的任何见解？是通过使用canvas globalCompositeOperation吗？我尝试修改代码以使用canvas globalCompositeOperation、destination-out 操作，但它会切穿黑色覆盖和html 页面。但这可能只是我编码错误，因为我在 JavaScript 方面不是很好。任何帮助将非常感激！！

我有一个带有蓝色轮廓的圆弧，然后是一个使用全局复合运算符“destination-out”覆盖部分圆弧的圆，导致部分圆弧被取消/切断，但新形状的一部分没有轮廓，有什么简单的方法可以重新建立形状的轮廓？

工作示例可以在这里找到：http: //jsfiddle.net/NY2up/

​</p>

我是HTML5新手，因为我只知道这方面的基础知识。如果有人能在这方面帮助我，那对我来说太好了。

我需要设计差异形状并从 div 拖放到画布。我在画布中使用操作创建了不同的形状globalcomposite，现在我需要从画布拖动到另一个画布。

我希望有人理解我的观点，任何帮助都会很棒。jsfiddle.net/rGUma/5/# 一些这样的东西，我需要保持我的设计形状的那三个图像是可能的。

那不是我的 jfiddle 它是一个例子，我想要那样谢谢你的回应

我正在尝试为 android 浏览器创建一个小型绘图应用程序。但是，当我尝试使用 globalCompositeOperation = "destination-out" 擦除位图时遇到问题，它根本不适用于三星 Galaxy S3

完全相同的代码在带有 android 4.1.1 的 HTC ONE X 上运行良好

我在这里http://code.google.com/p/android/issues/detail?id=39183发现了类似的问题，但没有解决方案。该示例的行为与我在 SGS3 和 ONEx 上的代码完全相同

知道有什么问题吗？它是 SGS3 唯一的问题吗？

我想使用这个插件创建基于画布的站点菜单，以创建“乘法”效果。然而，这个以及globalCompositeOperation正在同一画布中处理 ctx 对象。（在上下文混合器中，它使用屏幕外画布并使用其绘制信息，globalcompoperation 混合相同的 ctx）。我想为每个 ctx 对象创建鼠标事件（悬停和单击），因此每个 ctx 都会导致不同的 url。

这是我的测试：

很高兴知道如何在这里实现 jQuery。谢谢。

如何将 globalCompositeOperation（或任何其他可以给我“乘”颜色操作的插件）集成到jCanvas jQuery 插件中？

我正在尝试使用 HTML 5 的 canvas 元素制作时钟。

我想要做的是每秒划一条线，然后擦除前一条线。

我想用绘制另一条线来擦除前一条线，globalCompositeOperation='xor';但它不起作用！

这是代码：

这是现场示例： http: //jsfiddle.net/pyerT/1/ 有人知道答案吗？它适用于形状和文本..

我有一个用 KineticJS 创建的画布，我正在向该画布添加透明的 PNG 图像。当堆叠在一起时，这会形成一个包含所有不同部分的服装图像。

然后我想做的是让用户点击一个图案，然后用那个图案改变那件衣服的特定部分。所以我需要用该图案填充其中一张图像的不透明部分。我找到了一种不使用 KineticJS 的方法，它看起来像这样：

我的问题是，有没有办法用 KineticJS 执行上述相同的步骤？

此外，我确实首先尝试不使用 KineticJS 来执行此操作，但是当我将上述代码应用于图层时，它会填充所有图像，因为它们都在同一图层上。所以我猜我需要更改我的代码以使用多个图层或将图像添加到单个图层中的组中。我的想法在这里吗？对于我要完成的工作，哪个是更好的选择？多层？还是单层上的多个组？

感谢任何人都可以提供的任何帮助。