如何在JavaScript中利用Y轴仅填充画布底部三分之一区域颜色？

问题描述 #

我是一名高中生编程新手，正在使用CodeHS学习编程。我的一项作业要求绘制荷兰国旗，即画布被分为三部分：顶部三分之一为红色，中间留白，底部三分之一为蓝色。以下是我目前的代码：

function start(){
    redRect();
    blueRect();
}

function redRect(){
    var x = getWidth();
    var y = getHeight() / 3;
    var rect = new Rectangle(x, y)
    rect.setColor("red");
    add(rect);
}

function blueRect(){
    var x = getWidth();
    var y = getHeight() - 2/3;   // 这是我遇到问题的地方
    var rect = new Rectangle(x, y)
    rect.setColor("blue");
    add(rect);
}

我原本以为用画布高度减去三分之二就能只填充底部三分之一区域，但运行后蓝色填满了整个画布。请问如何仅填充画布底部三分之一为蓝色？是否需要先创建矩形再将其下移？

问题原因与解决方案 #

你的问题出在两个关键点：

1. 矩形高度计算错误：getHeight() - 2/3是用画布高度减去0.666（2/3是纯数值，不是画布高度的比例），这会让蓝色矩形的高度几乎等于整个画布，自然填满全屏。正确的蓝色矩形高度应该和红色一致，为getHeight() / 3。
2. 矩形位置未调整：新建矩形默认从画布左上角(0,0)开始绘制，所以需要把蓝色矩形下移到底部区域。

修改后的blueRect()函数如下：

function blueRect(){
    var width = getWidth();
    // 蓝色矩形高度为画布的1/3
    var height = getHeight() / 3;
    var rect = new Rectangle(width, height);
    rect.setColor("blue");
    // 将矩形定位到画布底部：y坐标设为画布高度的2/3（上方留红块+空白各1/3）
    rect.setPosition(0, getHeight() * 2 / 3);
    add(rect);
}

补充优化 #

红色矩形的代码逻辑是对的，若想让代码可读性更强，可以把变量名统一调整为更清晰的命名：

function redRect(){
    var width = getWidth();
    var height = getHeight() / 3;
    var rect = new Rectangle(width, height);
    rect.setColor("red");
    add(rect);
}

内容的提问来源于stack exchange，提问作者anonymouscoder