如何将矩形平滑变为圆形?

Sad*_*ena 3 javascript html5-canvas p5.js

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

我尝试在广场后面画一个圆圈并改变形状的大小,但那不是我想要的效果.

我需要做到这样的事情,旋转并不重要. 一只忙碌的猫

在此先感谢您的帮助!

Jul*_*ian 6

根据这一点,你应该做些什么:

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);
}
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
Run Code Online (Sandbox Code Playgroud)

关键部分是使用rect()函数,其中可以指定圆角半径的值.