【P5JS教学】标准计算器-界面设计

目录

01 结果显示区

02 功能按钮区

03 使用P5JS绘制界面

---

标准计算器主要实现基本数字的四则运算（加、减、乘、除）以及简单的科学计算（幂运算）。

例：

根据上图，我们可以看到标准计算器的界面主要包含两大区域，分别是结果显示区以及功能按钮区。

01 结果显示区

我们尝试使用功能按钮区中的部分功能，在结果显示区域中获得了下图结果。

经过分析，在结果显示区中我们必须有以下几个元素：

1. 在还未使用四则运算时，结果显示区中的计算结果元素显示用户输入内容；

2. 当输入四则运算符时，将输入的数字与运算符转换为字符串显示在计算结果元素上方，此时若重新修改四则运算符，字符串会自动修改其中的四则运算符，直至用户再次输入数字，计算结果元素位置重新显示用户第二次输入的数字；

3. 当输入等号时，字符串显示为等式，且计算结果元素显示计算结果。

02 功能按钮区

功能按钮区由24个按钮组成（MC、MR等功能本教程不涉及），并在按钮正中间显示功能符号。

注意：当用户按下按钮时，其颜色也会发生改变。

03 使用P5JS绘制界面

（1）在文档内使用P5JS组件，如果还不会创建P5JS组件，可以参考Hello World。

（2）创建画布，并指定画布颜色；

1. function setup() {
2. // 创建一个画布，大小为：320*540
3. createCanvas(320, 540);
4. }
6. function draw() {
7. // 指定背景颜色
8. background(150);
9. }
11. new p5();

（3）先给计算器起个名称，并显示在画面中吧；

1. function setup() {
2. // 创建一个画布，大小为：320*540
3. createCanvas(320, 540);
4. }
6. function draw() {
7. // 指定背景颜色
8. background(150);
9. </