Question

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

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

中

谢谢！

Answer 1

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

＆＃13;

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

＆＃13;

<canvas></canvas>

＆＃13;

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

旋转和缩放脚本

1 个答案: