为什么复杂的HTML Canvas剪切路径在Android浏览器中不起作用？

Question

我有一个用于着色蝴蝶的儿童网络应用程序，它使用剪切路径来设置绘画区域的边界。

该应用程序在桌面浏览器，Opera Mobile和iOS设备上运行良好，但Android默认浏览器似乎将剪切区域视为空，从而阻止任何后续画布操作生效。

您可以在此处找到源代码：

http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/

但主要行动是：

context.beginPath();
(lots of context.bezierCurveTo statements to draw a butterfly shape)
context.closePath(); 
context.stroke();
context.fillStyle = "rgb(255,255,255)";
context.fill();  
context.clip(); 

我尝试过改变订单，例如在尝试描边或填充形状之前剪切，但在Android的情况下它实际上并没有绘制任何东西 - 再次将剪切路径视为空。

有什么想法吗？是我，还是在剪辑路径上的Android webview中是否存在未记录的限制？

Answer 1

这仍然无法在Android浏览器上运行，但可以在适用于Android的Google Chrome上运行。

以下是您可以使用的测试页面：http://jsfiddle.net/LEpA5/

我怀疑常规的Android浏览器将在不久的将来被弃用，以支持谷歌Chrome。因为这个问题，我不会屏住呼吸。