Threepenny-gui帆布的不良表现

Question

我试图用threepennt-gui绘制100个动画圆圈。 感觉有点奇怪，所以我把它变成1000，问题很明显：

• 我可以看到绘图（即画布是黑色的，然后出现了圆圈，然后又变黑了，依此类推）
• 花了几秒钟只画了一次（应该每秒画50次（因为计时器不允许我做60次））
• 每帧花费的时间越来越长。 几帧后，它根本无法完成。

这是我的代码：

let draw (Circle c r (x:+y)) = do
        canv # set' UI.fillStyle (UI.htmlColor c)
        canv # UI.beginPath
        canv # UI.arc (x, y) r (-pi) pi
        canv # UI.closePath
        canv # UI.fill

let drawAll circles = do
        UI.clearCanvas canv
        ppos <- liftIO $ readIORef player
        draw (Circle "green" playerRadius ppos)
        mapM draw circles

因此，我想，这可能会生成效率低下的js代码，即展开循环（好的，几千行仍应生成并快速执行），因此我将圆圈转换为Json并使用了epenny的ffi函数，如下所示：

circleToJson (Circle color radius (x:+y)) = "{c:\"" ++ color ++ "\",r:" ++ show radius ++ ",x:" ++ show x ++ ",y:" ++ show y ++ "},"

circlesToJson xs = "[" ++ (foldr (++) "" $ map circleToJson xs) ++ "]"

jsDrawFunc = "(function(canvas, circles){var ctx = canvas.getContext(\"2d\"); for (c of circles) {ctx.fillStyle=c.c; ctx.beginPath(); ctx.arc(c.x,c.y,c.r,0,2*Math.PI,true); ctx.fill();}})"

jsCanvasArg = "$(\"canvas\")[0],"

jsDrawAll circles = jsDrawFunc ++ "(" ++ jsCanvasArg ++ circlesToJson circles ++ ");"

并在计时器事件中：

runFunction $ ffi $ jsDrawAll circles

-现在我再也看不到绘图了（即全部都显示了）。 取而代之的是firefox停止响应用户输入，直到绘制完成为止（据我所知，帧时更一致）-编辑：beginPath之后我没有空括号，因此所有圆都连接了。 现在它又开始闪烁（100； 1000，它需要约1秒的时间来绘制，并且不响应用户输入）。

这表明画布是问题所在。 （经过一些搜索后似乎已确认）

有解决这个问题的办法吗？ （理想情况下，不涉及使用其他gui-lib）