设置混合模式来绘制笔划?

发布于 2024-10-16 06:07:22 字数 368 浏览 6 评论 0原文

我看了一点,认为我的问题的答案是“否”,但这里是:

使用 Javascript 和 canvas 标签,我可以使用 lines() 绘制漂亮的 alpha 混合线。

这很有趣,但我想通过设置笔画的混合模式来更进一步。
例如,它看起来像使用经典的 src * (alpha) + dst * (1 - alpha), 我想要像 src + dst 这样的东西,以获得附加混合。

此页面: http://www.andersriggelsen.dk/OpenGL 似乎正在逐像素混合-像素, 我真的很想避免。

I've looked a bit and think the answer to my question is "no", but here goes:

With Javascript and a canvas tag, I can draw nicely alpha-blended lines with stroke().

This is loads of fun, but I'd like to take it one step further by setting the blendmode for the stroke.
e.g., it looks like it's using the classic src * (alpha) + dst * (1 - alpha),
and i'd like something like just src + dst, in order to get additive blending.

This page: http://www.andersriggelsen.dk/OpenGL seems to be doing blending pixel-by-pixel,
which I'd really like to avoid.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

凉城已无爱 2024-10-23 06:07:22

HTML5 Canvas 上下文本身支持的唯一“混合模式”是全局组合操作

  • 源-atop
  • 源-in
  • 源-out
  • 源-over
  • 目标-atop
  • 目的地输入
  • 目的地输出
  • 目的地结束
  • 较亮
  • 较暗 (不再在规范中)
  • xor
  • copy

请参阅此链接提供了模式的优秀动画交互示例。然而,您想要的添加/屏幕模式并不在其中。

如果此功能对您很重要,我已经编写了免费上下文混合器库来混合两个画布(或其区域)使用 Photoshop 风格的混合模式一起。正如您所说,其内部(必然)执行逐像素操作。它不像原生合成模式那么快,但也不慢。它仍然允许您在一个(通常是屏幕外)画布上执行本机描边和填充操作,然后将屏幕外画布合成到另一画布上。

是的,context-blender 支持“屏幕”和“添加”混合模式。 :)

The only "blend modes" supported natively by HTML5 Canvas context are the Global Composite Operations:

  • source-atop
  • source-in
  • source-out
  • source-over
  • destination-atop
  • destination-in
  • destination-out
  • destination-over
  • lighter
  • darker (no longer in the spec)
  • xor
  • copy

See this link for an excellent animated interactive example of the modes. The add/screen mode that you want, however, is not among them.

If this functionality is important to you, I have written the free context-blender library to blend two canvases (or regions thereof) together using Photoshop-style blend modes. As you say, the internals of this (necessarily) perform pixel-by-pixel operations. It's not nearly as fast as a native compositing mode, but it's not slow, either. It still lets you perform native stroke and fill operations on one (typically offscreen) canvas, and then composite the offscreen canvas onto another.

And yes, context-blender supports both 'screen' and 'add' blend modes. :)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文