所以我一直在搞乱矩阵下雨 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);;
最佳答案
简单。
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
}
关于javascript - 使矩阵雨html Canvas 动画上升而不是下降,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34189770/