html - 旋转和缩放脚本

Question

我有一个使用 p5.js 库用 JavaScript 编写的简单动画。我通常使用 <script></script> 将这些脚本放在网络上，并使用 CSS 规则将我的 Canvas 放在后面 vertical-align: top; z-index: -1我的动画 Canvas 通常会动态缩放，因此不需要复杂的 CSS。

如果有固定宽度和高度的 Canvas (例如 600 x 400)，是否可以应用 CSS 2D 转换，如 transform: translate(50px, 100px); transform: rotate(50px, 100px);到整个 Canvas ？作为后续问题，我如何将我的 CSS 指向脚本？我可以给脚本它自己的类吗？或者我必须将脚本放在一个 ?

谢谢!

Answer 1

是的，您可以在固定大小的 Canvas 元素上应用 CSS 和 2d 变换。

canvas {
  width: 600px;
  height: 400px;
  background: black;
  transform: translate(50px, 100px); transform: rotate(45deg);
}

<canvas></canvas>

回复:设置脚本的样式 - 您不需要设置 script 的样式元素本身，因为它永远不会显示在浏览器中。您要做的是设置 script 中的任何元素的样式。创建。所以说 script创建一个 <div class="createdByJS">hello world</div>到页面，然后您可以通过 .createdByJs { color: red; } 设置样式.