如何让矩形平滑地变成圆形？

Question

我正在尝试使用 p5.js 库在 javascript 中制作动画。我想把正方形改成圆形。

我尝试在正方形后面画一个圆并更改形状的大小，但这不是我想要的效果。

我需要实现这样的目标，旋转并不重要。

在此先感谢您的帮助！

Answer 1

与此类似的内容应该可以让您继续：

var sideLength = 100;
var increment = 0;

function setup() {
  createCanvas(400, 400);
  fill(0);
}

function draw() {
  if(increment <= sideLength/2){
    clear();
    increment++;
  }
  rect(10, 10, sideLength, sideLength, increment);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

关键部分是使用 rect() function，其中可以指定圆角的半径值。

如何让矩形平滑地变成圆形？

How can I make a rectangle change to a circle smoothly?

javascript

html5-canvas

p5.js