有没有办法让这个javascript动画更加适合移动设备？

Question

好吧，我昨天刚刚学会了在javascript画布中缓存，但我主要是为了下面的代码而学习它。我怎么开始？这似乎过于复杂而无法提高效率。我的完整代码在这里：https://github.com/GunZi200/Memory-Colour/blob/master/test.js

下面的代码效果很好，但是以如此快的速度重绘所有内容并不好。

我很乐意就如何做到这一点提出一些建议

var rects = [{x: 10 * Xf, y: 10 * Yf, w: xc, h: yc, color: '#26A65B'},        //Green
        {x: 110 * Xf, y: 10 * Yf, w: xc, h: yc, color: '#F22613'},          //Red
        {x: 10 * Xf, y: 130 * Yf, w: xc, h: yc, color: '#1E90FF'},          //Blue
        {x: 10 * Xf, y: 250 * Yf, w: xc, h: yc, color: '#F7CA18'},             //Gold
        {x: 110 * Xf, y: 250 * Yf, w: xc, h: yc, color: '#8E44AD'},         //Purple
        {x: 210 * Xf, y: 10 * Yf, w: xc, h: yc, color: '#DDA0DD'},          //Pink
        {x: 210 * Xf, y: 130 * Yf, w: xc, h: yc, color: '#FF8C00'},         //Orange k6
        {x: 210 * Xf, y: 250 * Yf, w: xc, h: yc, color: '#36D7B7'},   //Lightseagreen
        {x: 110 * Xf, y: 130 * Yf, w: xc, h: yc, color: 'Brown'}];          //Brown

var turnEvent = function turnEvent(AnX, AnY) { // AnX and AnY are x and y coordinates for clickevent
    console.time('Infunction');
    var lengd = rects.length;
    var i,
    one30 = 10,
    one40 = 10,  
    one301 = false, 
    one401 = false,
    temp = setInterval(myAnimation, 10);
    for (i = 0; i < lengd; i += 1) {
        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 myAnimation() {
        ctx.beginPath();
        ctx.fillStyle = rightBox.color;
        ctx.moveTo((rectangle.x + 43 - one40) * Xf, (rectangle.y + 33 - one30) * Yf);
        ctx.lineTo((rectangle.x + 50 + one40) * Xf, (rectangle.y + 33 - one30) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 58 + one30) * Xf, (rectangle.y + 33 - one30) * Yf, (rectangle.x + 58 + one30) * Xf, (rectangle.y + 43 - one40) * Yf);
        ctx.lineTo((rectangle.x + 58 + one30) * Xf, (rectangle.y + 70 + one40) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 58 + one30) * Xf, (rectangle.y + 78 + one30) * Yf, (rectangle.x + 50 + one40) * Xf, (rectangle.y + 78 + one30) * Yf);
        ctx.lineTo((rectangle.x + 43 - one40) * Xf, (rectangle.y + 78 + one30) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 33 - one30) * Xf, (rectangle.y + 78 + one30) * Yf, (rectangle.x + 33 - one30) * Xf, (rectangle.y + 70 + one40) * Yf);
        ctx.lineTo((rectangle.x + 33 - one30) * Xf, (rectangle.y + 43 - one40) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 33 - one30) * Xf, (rectangle.y + 33 - one30) * Yf, (rectangle.x + 43 - one40) * Xf, (rectangle.y + 33 - one30) * Yf);
        ctx.fill();
        ctx.closePath();
        if (one30 === 30) {
            one301 = true;
        } else {
            one30 += 2;
        }
        if (one40 === 40) {
            one401 = true;
        } else {
            one40 += 2;
        }
        if (one301 && one401) {
            rounded_rect(rectangle.x, rectangle.y, 90, 110, 10, null, 'black');
            console.timeEnd('Infunction');
            clearInterval(temp);
        }
    }
}

基本上这个代码的作用是，它首先绘制一个“较小”的矩形，大小约为三分之一。然后使用每个Interval循环，one30和one40增加2，增加矩形的大小。

编辑：更改了问题