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 timer
var 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();
}



本文来自微信小程序开发者论坛 微信小程序工厂 http://www.xcxgc.com 转载请保留。

本文网址：http://www.91bianli.com/weixinxiaochengxu/59085.html