我知道drawImage的{{1}}和x的浮点数/整数值的情况。但我需要的是一个平滑的动画，能够缓存我的形状。
例如，我想将一些复杂的形状（即SVG-tiger，converted to canvas-commands）绘制到画布上一次，然后使用y和{{顺利地移动 1}}。我需要浮动值，因为相反，我逐步移动：
这是JSFiddle的例子：
ctx.translate应用于ctx.drawImage个参数（Math.floor和translate等于以秒为单位的时间乘以{{1} }）：动画很奇怪（顺序，不顺畅）。x应用于y个参数（10和Math.floor等于以秒为单位的时间）：动画很奇怪（顺序，不顺利）。translate和x等于以秒为单位的时间乘以y）。速度很快，所以动画效果很好。x和y等于以秒为单位的时间）。速度很慢，因此动画看起来脉动。的为什么吗 最后一个案例让我感到困惑。我的尝试错了，有可能让这个缓存技巧很好用吗？
在Firefox中，有一个名为10（see）的画布属性，但在其他浏览器中没有任何帮助。它还会删除平滑路径。
代码提取：
x答案 0 :(得分：4)
我在第一个链接中编写了教程。
只是为了清除空气：
shapeCanvas.style.width = w + 'px';
shapeCanvas.style.height = h + 'px';
不值得做。如果它只是一个内存中的画布，没有必要设置样式，你不应该真的想要设置画布的宽度和高度样式，它只是让事情混乱。
ellisbben在评论中说的几乎是正在发生的事情。
我可以用一些我认为的黑客方式解决这个问题。一种方法可能是确保它永远不会在整数像素上绘制。另一个可能是在绘制任何内容之前使用ctx.scale(.99,.99)，因此它总是消除锯齿。在这里获得一致的解决方案很难，因为不同的browswer的抗锯齿实现是不同的。
以下是我自己的一些实验：
前两个是从画布绘制的形状，也是从PNG中绘制的
后两个是同一对，但按.99,.99
最后一个是真实的。它仍然模糊不清，但看起来比使用图像更加清晰。
我的实验都没有导致你的脉动结束，至少不是在微观层面上。我想如果你想将像素完美的图像设置为半像素空间，那么这就是你不得不忍受的事情。
如果你真的觉得你不能只画出完美的像素，那么你的（第二个）最佳选择是保持一致性可能是为了找到一种强制抗锯齿的方法。确保你总是被翻译成非整数或缩放它是如此轻微的候选人，但可能还有其他人。
说实话，最好的办法是不要缓存这些动画路径，直到你绝对需要它们的表现。缓存风格化的按钮和你制作的其他静态内容，但是如果你有动画路径需要缓慢而精确地移动并且看起来非常好，那么除非你真的，否则你最好坚持我的缓存优化。 也需要它。
答案 1 :(得分：2)
有点无耻的插件但是：我在HTML5老虎机游戏中实现了平滑的动画，有点hacky方式。生成的缓存图像在小画布上绘制一次然后我使用translate3d（）和-moz-transform / -webkit-transform样式来使画布移动，镜像和缩放图像。
预生成
动画阶段