html5 canvas 3d屏保 源码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body {
background: black;
overflow:hidden;
}
* {
margin:0;
padding:0;
}
</style>
</head>
<body>
<canvas id="C1"></canvas>
<script>
var loop ;
function canvas3d() {
var SCREEN_WIDTH = document.width;
var SCREEN_HEIGHT = document.height;
var fov = 250;
var HALF_WIDTH = SCREEN_WIDTH / 2;
var HALF_HEIGHT = SCREEN_HEIGHT / 2;
var numPoints = 10000;
var canvas = document.getElementById('C1');
var c = canvas.getContext("2d");
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
var points = [];
function initPoints() {
for (var i = 0; i < numPoints; i++) {
points.push([
Math.random() * SCREEN_WIDTH - HALF_WIDTH,
Math.random() * SCREEN_HEIGHT - HALF_HEIGHT,
Math.random() * HALF_HEIGHT - HALF_HEIGHT
]);
}
}
function render() {
c.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
for (var i in points) {
var z3d = points[i][2];
z3d -= 4;
if (z3d < -fov) { z3d += HALF_HEIGHT }
points[i][2] = z3d;
draw3Din2D(points[i]);
}
}
function draw3Din2D(point3D) {
var x3d = point3D[0];
var y3d = point3D[1];
var z3d = point3D[2];
var scale = fov / (fov + z3d);
var x2d = (x3d * scale) + HALF_WIDTH;
var y2d = (y3d * scale) + HALF_WIDTH;
c.lineWidth = scale;;
c.strokeStyle = "rgb(255,255,255)";
c.beginPath();
c.moveTo(x2d, y2d);
c.lineTo(x2d + 1, y2d);
c.lineTo(x2d + scale, y2d);
c.stroke();
}
initPoints();
window.clearInterval(loop);
loop = setInterval(function () { render(); }, 50);
}
canvas3d();
window.onresize=function () {
canvas3d();
};
</script>
</body>
</html>
