p5.js | style()函数

什么是p5.js?

p5.js是一个用于创意编码的JavaScript库，它使得在Web浏览器中创造有趣的图形非常简单。它基于Processing语言，可以通过它的简单易用的API来创建有趣的动画、交互式图形和音频视觉效果。

style()函数是什么？

在p5.js中，style()函数用于设置HTML元素的样式。它可以用于设置文本的颜色，大小，对齐方式等。它还可以用于设置元素的背景颜色，边框大小等。

style()函数的语法

style(css property, value);

• css property: 指定CSS属性的名称
• value: 指定CSS属性的值

例子：

function setup() {
  createCanvas(400, 400);
  style("background-color","#FF0000");
}

function draw() {
  background(220);
}

style()函数的应用

下面将介绍一些style()函数的常见应用。

1.设置元素的背景颜色

function setup() {
  createCanvas(400, 400);
  style("background-color","#FF0000");
}

function draw() {
  background(220);
}

2.设置元素的边框

function setup() {
  createCanvas(400, 400);
  style("border","5px solid #000000");
}

function draw() {
  background(220);
}

3.设置文本的颜色和大小

function setup() {
  createCanvas(400, 400);
  textSize(32);
  style("color","#FF0000");
}

function draw() {
  background(220);
  text("Hello World",25,25);
}

4.设置元素的对齐方式

function setup() {
  createCanvas(400, 400);
  style("text-align", "center");
}

function draw() {
  background(220);
  text("Hello World", width/2, height/2);
}

5.设置元素的透明度

function setup() {
  createCanvas(400, 400);
  style("opacity",0.5);
}

function draw() {
  background(220);
  rect(100,100,200,200);
}

结论

style()函数是p5.js中一个非常有用的函数，可以用于设置HTML元素的样式。它可以用于设置元素的背景颜色，边框大小，文本颜色和大小等。使用它可以方便的在Web浏览器中创建有趣的图形和视觉效果。