Question

因此，我一直在乱搞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);;

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
}

使矩阵下雨html画布动画上升而不是下降

1 个答案: