Canvas代码在IE9中不起作用 - 可能是alpha或globalCompositeOperation问题

时间:2011-06-04 00:04:30

标签: javascript html5 canvas alpha

我有一个javascript例程,旨在闪烁的太阳光线。例程创建'numRays'光线,然后使用globalCompositeOperation ='copy'开始覆盖光线,并在最旧的光线上绘制透明光线。

您可以在此处查看该计划:Sun Ray Page

JSFiddle.net代码位于此处:JSFiddle Sun Rays(我不知道如何让它在JSFiddle上运行,所以如果有人可以修复我的小提琴,我也会很感激。)

(注意:为了诊断目的,我在擦除的光线周围留下了黄色笔划,因此您可以看到它们已被执行。)

该代码适用于Chrome和Firefox,但是,在IE9中,当我使擦除部分处于活动状态时,不会绘制原始光线。换句话说,如果我注释掉创建擦除笔划的部分,则会发生光线填充。如果不这样做,那么只会发生擦除笔划。

我测试了各种固定的alpha值,IE9似乎完美地处理了它们。我已经将这两个部分设置为globalCompositeOperation ='source-over',但仍然没有获得原始光线。

有人可以帮助我更正此代码以使用IE9吗?

由于

1 个答案:

答案 0 :(得分:0)

它不能在jsfiddle中工作,因为你从不打电话给init()

IE9可能会破坏该行的脚本执行:

ctx.rotate(rayArray[currentRay]); // Rotate to the rayAngle

因为它会在前11次调用时抛出一个错误,因为你一直试图访问前10-11次未定义的值。

所以我将增量代码向下移动到ctx.rotate语句之后并添加了init。它在IE或FireFox中没有错误,但我无法知道它是否符合您的意图:

http://jsfiddle.net/Y5Y48/18/