如何将矩形平滑地变为圆形？

【问题标题】：How can I make a rectangle change to a circle smoothly?如何将矩形平滑地变为圆形？
【发布时间】：2019-01-28 19:04:21
【问题描述】：

我正在尝试使用 p5.js 库在 javascript 中制作动画。我想让一个正方形改变它的形状变成一个圆形。

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

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

提前感谢您的帮助！

【问题讨论】：

请向我们展示您到目前为止所做的尝试。
不是this你在找什么吗？
一个关于圆形变形的好视频可以在here找到。

标签： javascript html5-canvas p5.js

【解决方案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);
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"&gt;&lt;/script&gt;

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

【讨论】：