126 lines
4.1 KiB
HTML
126 lines
4.1 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>stats.js - theming example</title>
|
||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
margin: 0px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
* theme by: daformat / http://mathieujouhet.com/
|
||
|
|
*/
|
||
|
|
|
||
|
|
#stats #fps {
|
||
|
|
padding: 1px !important;
|
||
|
|
box-shadow: 1px 1px 3px rgba(0,0,0,.95) inset, 0px 0px 0px rgba(0,0,0,.75), 1px 1px 0px rgba(255,255,255,.25);
|
||
|
|
}
|
||
|
|
|
||
|
|
#stats #fps #fpsText {
|
||
|
|
left: 1px;
|
||
|
|
color: #80ccff !important;
|
||
|
|
background-image: -o-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: -ms-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
padding: 0 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#stats #fps #fpsGraph {
|
||
|
|
left: 1px;
|
||
|
|
padding: 1px;
|
||
|
|
margin-bottom:1px;
|
||
|
|
background-color: rgba(0,155,255,0.5) !important;
|
||
|
|
background-image: -o-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: -ms-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
#stats #fps #fpsGraph span {
|
||
|
|
border-bottom: 1px solid !important;
|
||
|
|
border-color: rgba(0,155,255,0.9) !important;
|
||
|
|
background-color: rgba(0,0,20,0.8) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#stats #ms {
|
||
|
|
padding: 1px !important;
|
||
|
|
box-shadow: 1px 1px 3px rgba(0,0,0,.95) inset, 0px 0px 0px rgba(0,0,0,.75), 1px 1px 0px rgba(255,255,255,.25);
|
||
|
|
}
|
||
|
|
|
||
|
|
#stats #ms #msText {
|
||
|
|
left: 1px;
|
||
|
|
color: #80ff80 !important;
|
||
|
|
background-image: -o-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: -ms-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
padding: 0 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#stats #ms #msGraph {
|
||
|
|
left: 1px;
|
||
|
|
padding: 1px;
|
||
|
|
margin-bottom:1px;
|
||
|
|
background-color: rgba(0,255,0,0.5) !important;
|
||
|
|
background-image: -o-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: -ms-linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
background-image: linear-gradient(top, rgba(255,255,255,.4) 0%, rgba(0,0,0,.35) 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
#stats #ms #msGraph span {
|
||
|
|
border-bottom: 1px solid !important;
|
||
|
|
border-color: rgba(0,255,0,0.9) !important;
|
||
|
|
background-color: rgba(0,20,0,0.8) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<script src="../build/stats.min.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var stats = new Stats();
|
||
|
|
document.body.appendChild( stats.domElement );
|
||
|
|
|
||
|
|
var canvas = document.createElement( 'canvas' );
|
||
|
|
canvas.width = 512;
|
||
|
|
canvas.height = 512;
|
||
|
|
document.body.appendChild( canvas );
|
||
|
|
|
||
|
|
var context = canvas.getContext( '2d' );
|
||
|
|
context.fillStyle = 'rgba(127,0,255,0.05)';
|
||
|
|
setInterval( function () {
|
||
|
|
|
||
|
|
var time = Date.now() * 0.001;
|
||
|
|
|
||
|
|
context.clearRect( 0, 0, 512, 512 );
|
||
|
|
|
||
|
|
stats.begin();
|
||
|
|
|
||
|
|
for ( var i = 0; i < 2000; i ++ ) {
|
||
|
|
|
||
|
|
var x = Math.cos( time + i * 0.01 ) * 196 + 256;
|
||
|
|
var y = Math.sin( time + i * 0.01234 ) * 196 + 256;
|
||
|
|
|
||
|
|
context.beginPath();
|
||
|
|
context.arc( x, y, 10, 0, Math.PI * 2, true );
|
||
|
|
context.fill();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
stats.end();
|
||
|
|
|
||
|
|
}, 1000 / 60 );
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|