我正在尝试创建一个动画效果，无法通过CSS变换，CSS过滤器或任何类型的随时间改变CSS属性（jquery animate样式）
我正在做的事情要求我能够将图像的每一行彼此分开制作动画。
我想到了两种方法来做到这一点
A） 为图像的每一行创建一个DIV，将图像设置为每个DIV的背景，并使用背景位置使每一行仅显示背景图像的正确行。 此解决方案将使用Javascript将每个DIV的宽度设置为图像的宽度，以在循环中动态创建每个div等。
B） 对图像的每一行使用canvas元素，并使用Image（）和createImageBitmap（）读取图像文件，并使用canvas.drawImage（）将图像的正确行绘制到每个画布中。
我有3个问题
1） 还有其他我没有考虑过的选择吗？
2） 以太中的其中一个明显快于另一个吗？
3） 我打算在我的动画中使用CSS过渡比例X / Y调整每行的宽度，我希望它能自动拉伸图像以适应（没有明显斩断或弄乱纵横比） 我的两个选项是否允许我这样做？
答案 0 :(得分：0)
1：是的。 SVG是一个选项，webGL也是如此。如果动画是静态的，则视频可以完成。还有其他选择，但它们的支持有限，或者是过时的技术。
2：DOM（包括HTML和CSS）和画布使用相同的硬件将像素渲染到屏幕上。在大多数情况下，他们都能以大致相同的速度完成同样的事情。通常，一个称职的程序员可以从画布中获得比从DOM获得更多的东西，尽管这部分与画布提供比DOM更简单的界面这一事实有关。使用画布可以避免在使用DOM时无法避免的大量不必要的开销。
3：大部分混合画布和CSS并不是最好的解决方案。正如问题2中所提到的，相同的硬件用于渲染像素。生成的渲染质量相同。如果你正在使用画布，你将使用内置的转换，在这之上添加CSS动画意味着更多的浏览器工作，有效地使每个像素所需的处理量加倍，这最好在通过canvas 2D API。
根据您的描述，解决方案最容易通过Javascript和画布完成。我认为代码的总量将小于CSS / HTML / Javascript版本的总量，并且会更灵活。但我是多年的程序员，编写代码是我的第二天性。如果你是一个没有经验的编码人员，这样的任务可能会带来很多问题，并且需要花费大量的时间来实施，因为错误的真正风险是一个持续的头痛。
CSS，HTML和DOM也是如此。
您必须选择如何实施这些项目，而不是基于什么是最佳解决方案，而是选择最有经验的方法并对使用有信心。两个同样好的实现之间的性能差异很小，但是当你第一次尝试一种方法时差异很大