p5.js圆(circle)的用法实战教程

circle(x, y, d)

function setup() {
  // 创建一个400×400像素的画布
  createCanvas(400, 400);
  // 给画布设置灰色背景（数值0-255，0是黑，255是白）
  background(220);
}

function draw() {
  // 在画布中心画一个直径100的圆
  // 画布中心坐标是（200,200），因为400/2=200
  circle(200, 200, 100);
}

function setup() {
  createCanvas(400, 400);
  background(135, 206, 235); // 浅蓝色背景（像天空）
}

function draw() {
  // 取消重复绘制（只画一次）
  noLoop();
  
  // 画第一个圆：红色，位置(100,150)，直径80
  fill(255, 99, 71); // 填充红色（RGB颜色：红255,绿99,蓝71）
  noStroke(); // 去掉边框
  circle(100, 150, 80);
  
  // 画第二个圆：黄色，位置(200,200)，直径120
  fill(255, 215, 0); // 填充金黄色
  circle(200, 200, 120);
  
  // 画第三个圆：紫色，位置(300,100)，直径60
  fill(138, 43, 226); // 填充紫色
  circle(300, 100, 60);
}

function setup() {
  createCanvas(400, 400);
  background(255); // 白色背景
}

function draw() {
  noLoop();
  let centerX = 200; // 圆心x
  let centerY = 200; // 圆心y
  
  // 最外层圆：直径200，灰色边框
  stroke(200); // 边框颜色
  strokeWeight(3); // 边框粗细
  noFill(); // 不填充
  circle(centerX, centerY, 200);
  
  // 中间圆：直径150，灰色边框
  circle(centerX, centerY, 150);
  
  // 内层圆：直径100，灰色边框
  circle(centerX, centerY, 100);
  
  // 中心小圆：直径20，黑色填充
  fill(0);
  noStroke();
  circle(centerX, centerY, 20);
}

let x = 50; // 圆的初始x坐标
let speed = 3; // 移动速度

function setup() {
  createCanvas(400, 200);
}

function draw() {
  background(220); // 每次刷新画布（清除上一帧）
  
  // 画圆：y固定在100，直径60
  fill(70, 130, 180); // 钢蓝色
  noStroke();
  circle(x, 100, 60);
  
  // 更新x坐标（移动）
  x = x + speed;
  
  // 碰到左右边缘时反向（模拟 alternate 方向）
  // 左边缘：x小于直径的一半（圆左边不超出画布）
  // 右边缘：x大于画布宽度 - 直径的一半（圆右边不超出画布）
  if (x < 30 || x > 400 - 30) {
    speed = -speed; // 反转速度方向
  }
}

let d = 50; // 初始直径
let scaleSpeed = 2; // 缩放速度

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

function draw() {
  background(255);
  
  // 画圆：固定在中心
  fill(255, 165, 0); // 橙色
  noStroke();
  circle(200, 200, d);
  
  // 更新直径（缩放）
  d = d + scaleSpeed;
  
  // 碰到大小边界时反向缩放
  if (d > 300 || d < 20) {
    scaleSpeed = -scaleSpeed; // 反转缩放方向
  }
}