javascript - 使用 Javascript 绘制天气数据图

Question

我在大学有一个练习，要求使用 openGraphics、canvas 绘制图形...

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

看起来像这样:

但应该是这样的:

代码:

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();

Answer 1

矩形将从代表其左上角的点开始绘制。该点是 canvas.fillRect 的前 2 个参数。

所以我看到:canvas.fillRect(20+30*i, 280, 30, hours);，其中每个矩形 (280) 的起始 y 坐标都相同。这意味着它将从 280 开始减少 小时数。所以，是的，这将使所有矩形向下并看起来与您想要的相反。

尝试在第二个参数中从 280-hours 开始。

所以:canvas.fillRect(20+30*i, 280-hours, 30, hours);