html 穿越星空效果,CANVAS 光速穿越星空的效果

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

var distanceScaleFactorX = 0.05;

var distanceScaleFactorY = 0.05;

var initialNumberOfPoints = 50;

var points;

var originX;

var originY;

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

originX = canvas.width / 2;

originY = canvas.height / 2;

function clear() {

context.fillStyle = "rgba(0, 0, 0, 0.3)";

context.fillRect(0, 0, canvas.width, canvas.height);

}

clear();

function generateRandomPoints(numberOfPoints) {

var generatedPoints = [];

for (var i = 0; i < numberOfPoints; i++) {

var point = generateRandomPoint();

generatedPoints.push(point);

}

return generatedPoints;

}

function generateRandomPoint() {

var x = Math.floor(Math.random() * canvas.width);

var y = Math.floor(Math.random() * canvas.height);

var point = {

x: x - originX,

y: y - originY

};

return point;

}

points = generateRandomPoints(initialNumberOfPoints);

function drawPoints(pointsToDraw) {

for (var i = 0; i < pointsToDraw.length; i++) {

context.fillStyle = "white";

context.fillRect(pointsToDraw[i].x + originX, pointsToDraw[i].y + originY, 1, 1);

}

}

drawPoints(points);

function movePoints(pointsToMove) {

for (var i = 0; i < pointsToMove.length; i++) {

pointsToMove[i].x += +pointsToMove[i].x * distanceScaleFactorX;

pointsToMove[i].y += +pointsToMove[i].y * distanceScaleFactorY;

if (pointsToMove[i].x < -(canvas.width / 2) || pointsToMove[i].x > (canvas.width / 2) || pointsToMove[i].y < -(canvas.height / 2) || pointsToMove[i].y > (canvas.height / 2)) {

pointsToMove.splice(i, 1);

}

}

}

setInterval(function fly() {

clear();

drawPoints(points);

points = points.concat(generateRandomPoints(initialNumberOfPoints));

movePoints(points);

}, 10);