Canvas 2D 的clip()函数有非常严重的性能问题,
导致现在所有的游戏引擎(cocos2d-js,白鹭,laya)
都不推荐大家使用默认的"2D"模式,而是推荐大家使用WebGL模式.
小游戏的Canvas2D的clip()函数在,path很复杂的情况下,性能非常低下,不知道官方是否有针对Canvas2D的
Path函数进行过性能测试,实际游戏的场景是惨不忍睹的.
比如我要在主场景绘制一个不断摇摆的小人,通常这个人物的眼睛,手臂,身体,头部等,都是放在一个大图上的.
在Canvas2D模式下,我需要使用clip()函数,将这些图片分别裁剪下来,然后再贴到主场景下.
但是这样下来,主场景的帧率非常低! 完全没办法正常运行. 但是在手机浏览器下却非常流畅~
希望官网能够正视下这个问题,能够快速解决,这样Canvas2D模式才能被正常使用!
贴一个可以测试clip()函数的case,希望官方能够重视下.
链接在:https://testdrive-archive.azurewebsites.net/Graphics/CanvasPad/Default.html
// Create a timervar index = 0;timer1 = setInterval(renderLoop, 16);function renderLoop() { if (index > 600) index = 0; index += 4; draw(index);}function draw(x) { ctx.fillStyle = "black"; ctx.fillRect(0, 0, 400, 500); // Create a clipping region ctx.save(); ctx.beginPath(); ctx.arc(x, x, 200, 0, Math.PI * 2, true); ctx.clip(); // Create a white background ctx.fillStyle = "white"; ctx.fillRect(0, 0, 400, 500); // Draw smiley drawSmiley(); // Restore state ctx.restore();} function drawSmiley(){ // Draw eye ctx.lineWidth = 20; ctx.beginPath(); ctx.moveTo(230, 130); ctx.bezierCurveTo(230, 130, 230, 130, 230, 210); ctx.stroke(); // Draw eye ctx.beginPath(); ctx.moveTo(170, 130); ctx.bezierCurveTo(170, 130, 170, 130, 170, 210); ctx.stroke(); // Draw smile ctx.beginPath(); ctx.moveTo(100, 230); ctx.bezierCurveTo(100, 230, 200, 380, 300, 230); ctx.stroke(); // Draw tongue ctx.beginPath(); ctx.moveTo(219, 298); ctx.bezierCurveTo(278, 351, 315, 315, 277, 258); ctx.stroke();} |
感谢反馈。2d接口中path相关的接口，性能确实有问题。我们计划在未来的版本中彻底替换掉现有2d的实现。但是目前还没有准确的时间线。请持续关注。
感谢反馈，我们会在对该问题进行讨论。