小编jti*_*kle的帖子

HTML5 Canvas:如何伪造globalCompositeOperation ="darker"

我用Google搜索并搜索了这一点,我所能找到的,包括在StackOverflow上,"支持已经在大多数主流浏览器中被破坏了." 不是我的问题的实际解决方案.

这个月的花花公子带着一副3D眼镜(红色/青色)来观看令人eye目的中心折叠.当然,我点击了互联网,找到了我能看到的每一个红色/青色的立体影像,看看它们有多棒.最终我发现了一些动画GIF,这导致了我可能会制作一些很酷的HTML5 Canvas,让你在3D场景中放置形状.

这是我得到了多远. 仅适用于Google Chrome.在Firefox中,"高架文本"应该看起来正确,但不是矩形.

因此,我生成场景的方式是:每个图层都包含一个Z-index,您可以在任何一个图层上放置一个矩形或一些文本.这个概念很简单.绘制对象时,它以纯红色向左绘制一个[Z-index]像素,然后在纯青色中向右绘制一个[Z-index]像素.

理论上,重叠部分应减去变成纯黑色.在Chrome中,这适用于填充矩形,抚摸文本,但不适用于填充文本.在Firefox中,这只适用于抚摸文本.

虽然预期的效果globalCompositeOperation="darker"应该完全符合我的要求,但显而易见的是,沿着这条道路前进只会带来痛苦.

这里有没有人知道如何在不使用的情况下获得我想要的效果globalCompositeOperation?我尝试在颜色上弄乱alpha通道,但是真的不喜欢它们是如何结合在一起的(它们从不加起来就是纯黑色).我可以在红色和青色之间绘制第三个黑色矩形,但这并不能解决文本或任意形状的问题.

我可以在Javascript中自己进行像素换像,但这看起来有点矫枉过正.有什么想法吗?

javascript html5-canvas

5
推荐指数
1
解决办法
2839
查看次数

标签 统计

html5-canvas ×1

javascript ×1