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

Question

所以我一直在搞乱矩阵下雨 Canvas 动画here，想知道是否有可能让雨向上而不是向下。我尝试过使用rotate()方法，它基本上会倾斜并拉伸(stretch) Canvas 。有什么建议吗？

代码:

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

Answer 1

简单。

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
}