Canvas 2D globalCompositeOperation（更轻）
根据 http://dev.w3.org/html5 的规范/2dcontext/#dom-context-2d-globalcompositeoperation，“较轻”的组合是“A 加 B”。
假设这是我的情况：
- 画布背景颜色：红色（#FF0000）
- 绘制从绿色（#00FF00）到黑色（#000000）的线性渐变
- 预期结果：从黄色（#FFFF00）到红色（#FF0000）的线性渐变
但是，“较亮”的复合操作似乎没有添加颜色。相反，它只是在红色背景上绘制绿色/黑色渐变。
预览： http://jsbin.com/uvaje4/4/ &代码： http://jsbin.com/uvaje4/4/edit
一些注释：
- 我已经在 chrome、firefox 和 chrome 上进行了测试歌剧。我只能看到 3 个选项：还没有浏览器实现“更轻”的组合，或者规范完全错误，或者我的代码错误。
- 我意识到创建从黄色到红色的渐变很简单，但我需要“更轻”的操作来处理更复杂的绘图。
According to the specification on http://dev.w3.org/html5/2dcontext/#dom-context-2d-globalcompositeoperation, the "lighter" composition is "A plus B".
Let's say this is my situation:
- Canvas background color: red (#FF0000)
- Draw a linear gradient from green (#00FF00) to black (#000000)
- Expected result: linear gradient from yellow (#FFFF00) to red (#FF0000)
However, the "lighter" composite operation does not seem to add the colors. Instead, it simply draws the green/black gradient over the red background.
Preview: http://jsbin.com/uvaje4/4/ & Code: http://jsbin.com/uvaje4/4/edit
Some notes:
- I've tested this on chrome, firefox & opera. I can only see 3 options: No browser has implemented the "lighter" composition yet, or the specification is plain wrong, or my code is wrong.
- I realise it would be simple to create a gradient from yellow to red, but I need the "lighter" operation to work for more complicated drawings.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
根据记录，在 Firefox 中打开严格警告会发现这个问题。
For the record, turning on strict warnings in Firefox would have caught this problem.
lighterFTL 上出现拼写错误：O http://jsbin.com/uvaje4/5/Spelling error on
lighterFTL :O http://jsbin.com/uvaje4/5/