HTML5 Canvas:使用/缓存drawImage绘制的元素在缩放和/或移动时被平滑

我确实知道drawImage的x和y的浮点/整数值的情况。但我需要的是一个平滑的动画，能够缓存我的形状。

关于使用备份画布缓存复杂路径的文章
• drawImage浮动参数的文章

例如，我想绘制一些复杂的形状(即SVG-tiger，转换为canvas-commands)到画布上，然后用ctx.translate和ctx.drawImage平滑地移动 。然后我需要浮点值，因为我得到的是一步一步的移动:

下面是JSFiddle的示例:

• 1:速度快，将Math.floor应用于translate参数(x和y等于以秒为单位乘以10):动画很奇怪(顺序，不流畅)。
• 二:速度慢，Math.floor应用于translate参数(x和y等于时间，以秒为单位):动画很奇怪(顺序，不流畅)。
• 三:速度快，不舍入，浮点值(x和y等于以秒为单位的时间乘以10)。速度很快，所以动画看起来很好。
• 四:慢速，不舍入，浮点值(x和y等于以秒为单位的时间)。速度慢，所以动画看起来脉动。为什么?

最后一个案例让我感到困惑。我错了在我的尝试，有可能使这个缓存技巧工作好吗?

在Firefox中，有一个名为mozImageSmoothingEnabled的画布属性(见)，但在其他浏览器中没有这个帮助。并且它还消除了路径平滑。

代码提取:

var shapeCanvas = null;
var w = 320, h = 240;
var startTime = 0;
function start() {
    startTime = Date.now();
    var docCanvas = document.getElementById('canvas');
    . . .
    shapeCanvas = document.createElement('canvas');
    . . .
    drawShape(shapeCanvas.getContext('2d'));
    drawNext(docCanvas.getContext('2d'));
}
function drawNext(ctx) {
    var msec = (Date.now() - startTime);
    var time = msec / 1000; // seconds passed from start
    ctx.clearRect(0, 0, w, h);
    ctx.save();
    // the lines to change: time | (time * 10) | Math.floor(time * 10)
    ctx.translate((time < 500) ? Math.floor(time * 10) : 500,
                  (time < 500) ? Math.floor(time * 10) : 500);
    ctx.drawImage(shapeCanvas, 0, 0);
    ctx.restore();
    __nextFrame(function() {
       drawNext(ctx);
    });
}
function drawShape(ctx) {
    . . .
}