旋转和缩放脚本

Question

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

如果 canvas 具有固定的宽度和高度（例如 600 x 400），是否可以将 CSS 二维变换应用于整个 canvas?作为后续问题，我如何将 CSS 指向脚本？我可以给它自己的脚本 class 吗？或者我必须将脚本放在 ?

谢谢！

Answer 1

是的，您可以在固定大小的 canvas 元素上应用 CSS 和二维变换。

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; }.

设置样式

旋转和缩放脚本

Rotating and scaling a script

html

css

canvas

p5.js