如何改进此requestAnimationFrame绘图？ （低FPS，大约20）

Question

问题在于，只要程序以非常快的速度完成动画，它就会变得非常滞后。我一直在努力改进下面的代码...但我想不出任何有用的东西......

我知道你们中的一些人可能会说：＆＃34;画得更少＆＃34;或类似的东西，但这是不可能的。

这基本上绘制了一个带圆角的小矩形，并使每个帧都变大，直到它达到if语句中所见的特定大小。

完整代码（如果需要）：https://github.com/GunZi200/Memory-Colour/blob/master/SourceCode.js

function turnEvent(AnX, AnY) {
    var lengd = rects.length;
    eventDone = false,
    one30 = 18,
    one40 = 18,  
    one301 = false, 
    one401 = false;
    for (var i = 0; i < lengd; i += 1) {
        // Indentifying rectangle in use, so we can access the color, and position.
        if (collides([rects[i]], AnX, AnY)) {
            var rightBox = rects[i];
            var rectangle = rects2[i];
        }
    }
    rounded_rect(rectangle.x, rectangle.y, 90, 110, 10, 'black', 'black');
    function render() {
        ctx.beginPath();
        ctx.fillStyle = rightBox.color;
        ctx.moveTo((rectangle.x + 42 - one40) * Xf, (rectangle.y + 32 - one30) * Yf);
        ctx.lineTo((rectangle.x + 48 + one40) * Xf, (rectangle.y + 32 - one30) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 58 + one30) * Xf, (rectangle.y + 32 - one30) * Yf, (rectangle.x + 58 + one30) * Xf, (rectangle.y + 42 - one40) * Yf);
        ctx.lineTo((rectangle.x + 58 + one30) * Xf, (rectangle.y + 68 + one40) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 58 + one30) * Xf, (rectangle.y + 78 + one30) * Yf, (rectangle.x + 48 + one40) * Xf, (rectangle.y + 78 + one30) * Yf);
        ctx.lineTo((rectangle.x + 42 - one40) * Xf, (rectangle.y + 78 + one30) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 32 - one30) * Xf, (rectangle.y + 78 + one30) * Yf, (rectangle.x + 32 - one30) * Xf, (rectangle.y + 68 + one40) * Yf);
        ctx.lineTo((rectangle.x + 32 - one30) * Xf, (rectangle.y + 42 - one40) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 32 - one30) * Xf, (rectangle.y + 32 - one30) * Yf, (rectangle.x + 42 - one40) * Xf, (rectangle.y + 32 - one30) * Yf);
        ctx.fill();
        ctx.closePath();
        ctx.fillStyle = fillstyle;
        if (one30 === 30) {
            one30 += 0;
            one301 = true;
        } else {
            one30 += 2;
        }
        if (one40 === 30) {
            one401 = true;
        } else {
            one40 += 1;
        }
        if (one401 && one301) {
            eventDone = true;
        }
    }
    (function animloop(){
        if (eventDone) {//condition to stop requestAnimationFrame();
            eventDone = false;
            ctx.clearRect(0, 0, 310 * Xf, 365 * Yf);
            ---------ctx.putImageData(imgData, 0, 0);--------------
            return;
        };
        requestAnimationFrame(animloop);
        render();
    })();
}

编辑：问题是制作实际图片。我无法将其渲染到缓存的画布上，因为高清中的图像会变得很大。我正在为iPhone，Retina Displays开发这款产品。

我在运行下面的if语句之前渲染UI，然后简单地拍摄一个＆＃34;部分＆＃34;它的。我使用主画布来保持图像的质量。如果我使用drawImage ... 我使用什么图像？我不想使用文件，但我不介意任何例子吗？ ：）

if (x === 414 && y === 736) {
    imgData = ctx.getImageData(0,0,3*x,3*365*Yf); // iPhone 6+ and 6
} else if (x === 768 && y === 1024) {
    if (a_canvas.width === 2 * x) {
        imgData = ctx.getImageData(0,0,2*x,2*365*Yf); // normal retina
    } else {
        imgData = ctx.getImageData(0,0,x,365*Yf); // non-Retina displays
    }
} else {
    imgData = ctx.getImageData(0,0,2*x,2*365*Yf); // normal retina
}