canvas上Rectangle不显示：生日蛋糕红色矩形蜡烛无法渲染求助

存在的问题 #

• 蜡烛尺寸计算错误：当前代码将蜡烛宽高设置为NUM_CANDLES / 15、NUM_CANDLES / 10，若输入年龄为个位数，蜡烛宽高不足1px，自然无法被观察到。
• 蜡烛坐标逻辑错误：当前所有蜡烛的X坐标完全相同，全部堆叠在一起；Y坐标设置在蛋糕底部与蓝色盘子重合，被遮挡无法显示。
• 蜡烛颜色配置错误：需求为红色蜡烛，当前配置的#9B30FF是紫色值。
• 循环参数错误：蜡烛循环使用i <= NUM_CANDLES作为判断条件，会多生成1根多余蜡烛。
• 输入逻辑存在隐忧：第一次读取用户输入使用readLine得到的是字符串类型，直接做数值判断可能出现异常。

修复后代码 #

var CENTER_X = getWidth() / 2;
var CENTER_Y = getHeight() / 2;
println(CENTER_X + ", " + CENTER_Y);
var CAKE_WIDTH = 200; //Tens has to be even
var CAKE_HEIGHT = 100; //Tens has to be even
var CAKE_COLOR = "orange";
var ICING_RADIUS = 10;
var NUM_ICING = CAKE_WIDTH / (ICING_RADIUS * 2);
var ICING_COLOR = "purple";
var NUM_CANDLES = 0;
// 优化输入逻辑，统一取整数
while (!(NUM_CANDLES > 0)){
    NUM_CANDLES = readInt("How old are you? ");
    if (NUM_CANDLES > 0) break;
    println("请输入大于0的整数");
}
// 调整蜡烛尺寸为固定可见大小，也可根据需求调整为和年龄正相关的计算公式
var CANDLE_WIDTH = 10;
var CANDLE_HEIGHT = 30;
var CANDLE_COLOR = "red";
var PLATE_WIDTH = CAKE_WIDTH + 50;
var PLATE_HEIGHT = 50;
var PLATE_COLOR = "blue";

function start() {
    var cake = new Rectangle(CAKE_WIDTH, CAKE_HEIGHT);
    cake.setPosition(CENTER_X - (CAKE_WIDTH / 2), CENTER_Y - (CAKE_HEIGHT / 2));
    cake.setColor(CAKE_COLOR);
    add(cake);

    // 优化盘子居中逻辑
    var plate = new Rectangle(PLATE_WIDTH, PLATE_HEIGHT);
    plate.setPosition(CENTER_X - PLATE_WIDTH / 2, CENTER_Y + (CAKE_HEIGHT / 2));
    plate.setColor(PLATE_COLOR);
    add(plate);

    // 修复蜡烛位置、循环逻辑
    var candleGap = CAKE_WIDTH / (NUM_CANDLES + 1);
    for (var i = 0; i < NUM_CANDLES; i++){
        var candle = new Rectangle(CANDLE_WIDTH, CANDLE_HEIGHT);
        // 蜡烛横向均匀分布在蛋糕顶面，底部贴合蛋糕顶部
        candle.setPosition(
            CENTER_X - CAKE_WIDTH/2 + candleGap * (i+1) - CANDLE_WIDTH/2,
            CENTER_Y - CAKE_HEIGHT/2 - CANDLE_HEIGHT
        );
        candle.setColor(CANDLE_COLOR);
        add(candle);
    }

    for (var i = 0; i <= NUM_ICING; i++){
        var icing = new Circle(ICING_RADIUS);
        icing.setPosition(CENTER_X - (CAKE_WIDTH / 2), CENTER_Y - (CAKE_HEIGHT / 2));
        icing.move((ICING_RADIUS * 2) * i, 0)
        icing.setColor(ICING_COLOR);
        add(icing);
    }
    for (var i = 0; i <= NUM_ICING; i++){
        var icing = new Circle(ICING_RADIUS);
        icing.setPosition(CENTER_X - (CAKE_WIDTH / 2), CENTER_Y + (CAKE_HEIGHT / 2));
        icing.move((ICING_RADIUS * 2) * i, 0)
        icing.setColor(ICING_COLOR);
        add(icing);
    }
}

内容的提问来源于stack exchange，提问作者Lerb_games school alt