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

巴特西

html5 canvas 3d屏保源码

最新文章

热门文章

巴特西

html5 canvas 3d屏保 源码

最新文章

热门文章

html5 canvas 3d屏保源码