在 p5.js 中创建带圆角的 canvas

Question

我似乎无法在 p5.js 参考页上找到任何关于如何在通过 createCanvas() 创建的 canvas 上圆角的信息。这对于矩形是可能的，因为该函数采用的第五个输入是边界半径。创建 canvas 时情况并非如此。

我整理了一个小示例，展示了一个平角 canvas 内部有一个弧形矩形，我的目标是在 canvas' 形状中反映出来。

如有任何帮助，我们将不胜感激。谢谢

function setup() {
  createCanvas(200,200);
}

function draw() {
  background(32);
  rectangle();
}

function rectangle() {
  stroke(255);
  fill(255,255,255,100);
  rect(70,70,60,60,10);
}

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
</head>
<body>
</body>

Answer 1

function setup() {
  createCanvas(200,200);
}

function draw() {
  background(32);
  rectangle();
}

function rectangle() {
  stroke(255);
  fill(255,255,255,100);
  rect(70,70,60,60,10);
}

canvas {
  border-radius: 12px;
}

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
</head>
<body>
</body>

你想得到这样的东西吗？通过 css 我把黑色 canvas 容器弄圆了。

在 p5.js 中创建带圆角的 canvas

Create a canvas with rounded corners in p5.js

javascript

canvas

p5.js