javascript - 使矩阵下雨的HTML Canvas 动画上升而不是下降

因此，我一直在搞不定Matrix下雨画布动画here，并想知道是否有可能使其向上而不是向下降雨。我试过使用rotate（）方法，它基本上使画布倾斜并且有点伸展。有什么建议吗？

码：

 var numberOfColumns = 50;
 var pixelsPerColumn = width / numberOfColumns;

 var columnY = [];
 for (var i=0; i<numberOfColumns; i++) {
      columnY[i] = randomInt(0, height);
 }

 var characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*";
 c.font = "12px Courier";

 function step() {
     c.fillStyle = "rgba(0,0,0,0.05)";
     c.fillRect(0, 0, width, height);
     c.fillStyle = "#0f0";
 for (var i=0; i<numberOfColumns; i++) {
     var r = randomInt(0, characters.length);
     var char = characters.substring(r, r+1);
     c.fillText(char, i*pixelsPerColumn, columnY[i]);
     columnY[i] += pixelsPerColumn;
    if (columnY[i] > height) {
     columnY[i] -= height;
    }
 }
}
loop(step, 100);;

最佳答案

简单。

columnY[i] -= pixelsPerColumn; //subtract instead of add
if (columnY[i] < 0) { //if less than zero (the top)
  columnY[i] += height; //add height instead of removing it
}