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

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

Is it possible to do with canvas 2d or to reproduce something similar ?

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

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

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

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

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

How to Rotate Canvas Element on the X axis with Javascript

javascript

html

canvas

2d