Question

我一直在学习如何使用p5.js库，并在制作简单的草图时遇到困难。代码的目标是使用一个滑块来改变绘制椭圆的半径。滑块在增加值时起作用，但在减小时，最大的椭圆会覆盖较小的椭圆。这是有道理的，因为椭圆不断被绘制。但是有没有办法只用一个椭圆并用滑块改变它的半径？

这是我设法组建的可怕代码。 JS：

var spr;
var slider;
function setup() {
  createCanvas(500,500);
  background(51);
  spr = new Sphere();
  slider = createSlider(0, width, 1);
  slider.position(6, 6);
  slider.style('width','500px');
}

function draw() {
  var val = slider.value();
  spr.show(val);
}

function Sphere() {
  this.x = width/2;
  this.y = height/2;

  this.show = function(val){
    noStroke();
    fill(100,0,250);
    ellipse(this.x, this.y, val, val);
  }
}

Here is a picture of how it looks like in the browser.

在询问之前，我找了一个答案，却找不到答案。它可能非常简单，我只是错过了一些非常重要的东西。

Answer 1

您永远不会清除旧框架，因此您绘制的所有内容都会保留在屏幕上。这就是为什么你最大的图纸总是掩盖你的小图纸。

要清除旧屏幕，只需添加对background()功能的调用作为draw()功能的第一行。

可以在the reference找到更多信息。

如何在p5.js中改变绘制椭圆的半径？

1 个答案: