在 p5.js 中创建带圆角的画布答案

【问题标题】：Create a canvas with rounded corners in p5.js在 p5.js 中创建带圆角的画布
【发布时间】：2017-06-06 18:35:16
【问题描述】：

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

我整理了一个小例子，展示了一个平角画布，里面有一个弯角矩形，我的目标是反映在画布的形状中。

任何帮助将不胜感激。谢谢。

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>

【问题讨论】：

标签： javascript canvas p5.js

【解决方案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 我将黑色画布容器四舍五入。

【讨论】：

奇怪的是，我没有想到这一点。以为我必须为它分配一个 ID 或其他东西。