如何使用 Javascript 在 X 轴上旋转画布元素

Question

我想知道是否有特定的方法可以制作这种动画？

X 旋转轴： https : //gyazo.com/78c66d5cd8fc0bcb5ab2e0c3ddb77508

是否可以使用 canvas 2d 或重现类似的东西？

谢谢

Answer 1

与 Canvas 相比，CSS 动画将是此类事情的理想选择。

例如。

 body { background-color: #444; } @keyframes slideDown { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } } .outer { perspective: 500px; perspective-origin: 50% 0%; width: 200px; } .inner { padding: 20px 0; font-weight: bold; transform-origin: top left; animation-iteration-count: infinite; animation-duration: 2s; animation-name: slideDown; animation-direction: alternate; background-color: yellow; font-size: 50pt; font-family: arial; text-align: center; transform: rotateX(-90deg); }

 <br/> <center> <div class="outer"> <div class="inner">Texte</div> </div> </center>

Answer 2

是否可以使用 canvas 2d 或重现类似的东西？

是的，可以在 2d 画布上实现这种效果 - 但是在 vanilla JS 中需要大量的编码。

一种方法是创建第二个隐藏画布，您可以在其中生成要在现有可见画布中设置动画的场景。 然后，您需要将隐藏的画布以 1px 高的逐行复制到可见画布，计算适当的目标 x、y 和宽度值以模拟 3d 效果。 然而，结果通常会包括莫尔效应（ https://en.wikipedia.org/wiki/Moir%C3%A9_pattern ） - 摆脱它的最简单方法是非常轻柔地模糊可见画布，直到出现不需要的干扰图案消失。

显然，以上不是一个理想的解决方案 - 如果您可以使用 WebGL 画布，您可以使用 3d 画布库（例如，three.js），这将使生成效果更容易。 CSS 方法 - 如此处的另一个答案所述 - 将是更好的解决方案！

如果你真的无法离开 2d 画布，那么你可以使用 Scrawl-canvas JS 库来实现效果（免责声明：我维护了这个库）——看这里的例子： https://scrawl-v8.rikweb。 org.uk/demo/dom-015.html