如何用P5J制作透明的画布？

发布于 2025-01-30 21:17:25 字数 1365 浏览 0 评论 0原文

最多。 0.7.3，画布是透明的。在此样品中，可以在圆环周围看到青色背景。

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
  <iframe width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE"></iframe>
  <script>
function setup() {
  createCanvas(400, 400, WEBGL);
  fill('lightpink');
}
function draw() {
  torus(100, 40);
}
  </script>
  <style>
canvas {
  position: absolute;
  z-Index: 1;
  top: 0;
  left: 0;
}
  </style>
</body>

但是在该版本之后，绘制了黑色背景。在此样品中，画布被不透明的黑色填充。差异只是版本。

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
  <iframe width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE"></iframe>
  <script>
function setup() {
  createCanvas(400, 400, WEBGL);
  fill('lightpink');
}
function draw() {
  torus(100, 40);
}
  </script>
  <style>
canvas {
  position: absolute;
  z-Index: 1;
  top: 0;
  left: 0;
}
  </style>
</body>

如何制作最新版本的P5.js透明？

PS。为了明确说明，我编辑了YouTube电影的背景。使用旧的P5J，它是透明的，可以通过P5图看电影。但是有了新版本，画布被黑色背景填充，我无法叠加电影上的图纸。

原文

Up to ver. 0.7.3, the canvas is transparent.
In this sample, cyan background can be seen around the torus.

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
  <iframe width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE"></iframe>
  <script>
function setup() {
  createCanvas(400, 400, WEBGL);
  fill('lightpink');
}
function draw() {
  torus(100, 40);
}
  </script>
  <style>
canvas {
  position: absolute;
  z-Index: 1;
  top: 0;
  left: 0;
}
  </style>
</body>

But after that version, black background is drawn.
In this sample, canvas is filled by opaque black color.
The difference is only the version.

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
  <iframe width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE"></iframe>
  <script>
function setup() {
  createCanvas(400, 400, WEBGL);
  fill('lightpink');
}
function draw() {
  torus(100, 40);
}
  </script>
  <style>
canvas {
  position: absolute;
  z-Index: 1;
  top: 0;
  left: 0;
}
  </style>
</body>

How can I make the latest version of p5.js transparent?

PS.
To make the point clear, I edited the background to youtube movie.
With the old p5js, it is transparent and can see the movie through the p5 drawing. But with the new version, canvas is filled by black background and I cannot overlay the drawing on the movie.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瑶笙 2025-02-06 21:17:25

我可以通过文档找到的一种方法是使用背景功能

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
  <div id="back" style="height: 100%;background:cyan"></div>
  <script>
    function setup() {
      var canvas = createCanvas(400, 400, WEBGL);
      canvas.parent('back');
      fill('lightpink');
    }

    function draw() {
      background("cyan")
      torus(100, 40);
    }
  </script>
</body>

One way i can find through DOCS is using background function

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
  <div id="back" style="height: 100%;background:cyan"></div>
  <script>
    function setup() {
      var canvas = createCanvas(400, 400, WEBGL);
      canvas.parent('back');
      fill('lightpink');
    }

    function draw() {
      background("cyan")
      torus(100, 40);
    }
  </script>
</body>

回复收藏 0 原文

~没有更多了~