用Javascript绘制天气数据图

我在大学里做了一个练习，要求我用openGraphics，canvas

我快到终点了。唯一不能正常工作的是，扮演柱角色的矩形向下，而不是向上

看起来是这样的：

但应该是这样的：

代码：

var canvas;
canvas = openGraphics();

canvas.setFont("TIMES", "13px", Font.BOLD);
canvas.drawString("Weather Data: Bradford 2015", 5, 10);
canvas.drawString("Sunshine (in hours)", 5, 30);
canvas.setFont("TIMES", "12px", Font.PLAIN);

var i = 0;
var k = 0;
var month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
while(i < 12) {
var hours = prompt("Type amount of sunshine hours for " + month[k]);

canvas.setColor("pink");
canvas.fillRect(20+30*i, 280, 30, hours);
canvas.setColor("black");
canvas.drawRect(20+30*i, 280, 30, hours);


i += 1;
k += 1;

}

canvas.setStroke("3");
canvas.drawLine(20, 60, 20, 280);
canvas.drawLine(20, 280, 380, 280);

canvas.setFont("TIMES", "13px", Font.BOLD);
canvas.drawString("0", 5, 270);
canvas.drawString("45", 5, 225);
canvas.drawString("90", 5, 180);
canvas.drawString("135", 0, 135);
canvas.drawString("180", 0, 90);
canvas.drawString("225", 0, 55);
canvas.drawString("J", 35, 285);
canvas.drawString("F", 65, 285);
canvas.drawString("M", 95, 285);
canvas.drawString("A", 125, 285);
canvas.drawString("M", 155, 285);
canvas.drawString("J", 185, 285);
canvas.drawString("J", 215, 285);
canvas.drawString("A", 245, 285);
canvas.drawString("S", 275, 285);
canvas.drawString("O", 305, 285);
canvas.drawString("N", 335, 285);
canvas.drawString("D", 365, 285);


canvas.paint();

var画布；
canvas=openGraphics（）；
canvas.setFont（“TIMES”，“13px”，Font.BOLD）；
帆布。拉丝（“天气数据：Bradford 2015”，5，10）；
帆布。拉绳（“阳光（小时）”，5,30；
setFont（“TIMES”，“12px”，Font.PLAIN）；
var i=0；
var k=0；
var月=[‘一月’、‘二月’、‘三月’、‘四月’、‘五月’、‘六月’、‘七月’、‘八月’、‘九月’、‘十月’、‘十一月’、‘十二月’]；
而（i<12）{
var小时=提示（“输入“+月[k]的日照小时数”）；
canvas.setColor（“粉色”）；
canvas.fillRect（20+30*i，280，30，小时）；
canvas.setColor（“黑色”）；
canvas.drawRect（20+30*i，280，30，小时）；
i+=1；
k+=1；
}
画布。调整行程（“3”）；
帆布.抽绳（20,60,20,280）；
帆布.抽绳（20280380280）；
canvas.setFont（“TIMES”，“13px”，Font.BOLD）；
帆布。拉丝（“0”，5270）；
帆布。拉丝（“45”，5225）；
帆布。拉丝（“90”，5180）；
帆布。拉丝（“135”，0，135）；
帆布。拉丝（“180”，0，90）；
帆布。拉丝（“225”，0，55）；
帆布。拉丝（“J”，35285）；
帆布。拉丝（“F”，65285）；
帆布。拉丝（“M”，95285）；
帆布。拉丝（“A”，125285）；
帆布。拉丝（“M”，155285）；
帆布。拉丝（“J”，185285）；
帆布。拉丝（“J”，215285）；
帆布。拉丝（“A”，245285）；
帆布。拉丝（“S”，275，285）；
帆布。拉丝（“O”，305，285）；
帆布。拉丝（“N”，335285）；
帆布。拉丝（“D”，365，285）；
canvas.paint（）；

矩形将从表示其左上角的点开始绘制。这一点是

canvas.fillRect

的前两个参数

我看到：

canvas.fillRect（20+30*I，280，30，小时），其中每个矩形（280）的起始y坐标相同。这意味着它将从280小时减少
hours
amount。是的，这会使所有的矩形向下，看起来和你想要的相反

尝试从第二个参数中的
280小时开始

所以：
canvas.fillRect（20+30*i，280小时，30小时）
太棒了，它能工作！非常感谢；）