P5.js Circle - Javascript

简介

P5.js是一个基于Javascript的创意编程库，适用于艺术家、设计师、教育工作者和初学者等在浏览器中进行交互式图形、动画和声音的创意表达。本文将介绍如何使用p5.js创建一个圆形。

示例代码

以下是一个基本的创建圆形的示例代码：

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

function draw() {
  background(220);
  ellipse(200, 200, 50, 50);
}

解析：

• createCanvas(400, 400)可以创建一个宽高均为400像素的画布；
• background(220)可以将整个画布的背景改为灰色（RGB值为220）；
• ellipse(200, 200, 50, 50)可以在画布中心创建一个50像素的圆形。

代码说明

创建画布

在使用p5js创建任何形状之前，需要先创建一个画布。可以使用createCanvas()函数来创建一个制定大小的画布，其语法如下：

createCanvas(width, height);

其中width表示画布宽度，height表示画布高度。例如，createCanvas(400, 400)可以创建一个宽高均为400像素的画布。

创建圆形

创建圆形需要使用ellipse()函数，其语法如下：

ellipse(x, y, width, height);

其中(x, y)表示圆形的中心坐标，width和height分别表示圆形的宽度和高度。当width和height相等时，创建的圆形为一个正圆。例如，ellipse(200, 200, 50, 50)可以在画布中心创建一个50像素的圆形。

总结

本文介绍了如何使用p5.js创建一个圆形，并介绍了createCanvas()和ellipse()等函数的使用方法。希望本文可以帮助读者了解p5.js的基本用法，为创意编程提供一些帮助。