<canvas width=800 height=600 id=canvas></canvas>
|
<script>
|
var ctx = null;
|
var width = 0, height = 0;
|
var drawInterval = 16;
|
var frameCount = 0;
|
var fps = 0;
|
var maxfps = 1 / (drawInterval / 1000);
|
var lastTime = new Date();
|
|
var NUM_GRADIENTS = 5;
|
var gradients = [];
|
|
function irand(limit) {
|
return Math.floor(limit * Math.random());
|
}
|
|
function randomColor() {
|
return 'rgba(' + [irand(255), irand(255), irand(255), 0.25].join(',') + ')';
|
}
|
|
function init() {
|
if (Setup('2d')) {
|
setInterval(Draw, drawInterval);
|
|
for (var i = 0; i < NUM_GRADIENTS; ++i) {
|
gradients.push({
|
x1: 0,
|
y1: 0,
|
x2: 0,
|
y2: 2 * height / 4,
|
color1: randomColor(),
|
color2: randomColor(),
|
});
|
}
|
}
|
}
|
|
function Setup(method) {
|
var canvas = document.getElementById('canvas');
|
|
if (canvas && canvas.getContext) {
|
width = canvas.width;
|
height = canvas.height;
|
|
ctx = canvas.getContext(method);
|
return true;
|
}
|
|
return false;
|
}
|
|
function clamp(v, a, b) {
|
return Math.min(b, Math.max(v, a));
|
}
|
|
function Draw() {
|
var nowTime = new Date();
|
var diffTime = Math.ceil((nowTime.getTime() - lastTime.getTime()));
|
|
for (var i = 0; i < NUM_GRADIENTS; ++i) {
|
gradients[i].x1 = clamp(
|
gradients[i].x1 + (Math.random() - 0.5) * 20, 0, width);
|
gradients[i].y1 = clamp(
|
gradients[i].y1 + (Math.random() - 0.5) * 20, 0, height);
|
gradients[i].x2 = clamp(
|
gradients[i].x2 + (Math.random() - 0.5) * 20, 0, width);
|
gradients[i].y2 = clamp(
|
gradients[i].y2 + (Math.random() - 0.5) * 20, 0, height);
|
}
|
|
if (diffTime >= 1000) {
|
fps = frameCount;
|
frameCount = 0.0;
|
lastTime = nowTime;
|
}
|
|
ctx.clearRect(0, 0, width, height);
|
|
for (var i = 0; i < NUM_GRADIENTS; ++i) {
|
var g = gradients[i];
|
var lingrad = ctx.createLinearGradient(g.x1,g.y1,g.x2,g.y2);
|
lingrad.addColorStop(0, g.color1);
|
lingrad.addColorStop(1, g.color2);
|
ctx.save();
|
ctx.fillStyle = lingrad;
|
ctx.fillRect(0, 0, width, height);
|
ctx.restore();
|
}
|
|
|
ctx.save();
|
ctx.fillStyle = '#000000';
|
ctx.fillRect(0, height - 15, width, 15);
|
ctx.fillStyle = '#FFF';
|
ctx.font = 'bold 10px sans-serif';
|
ctx.fillText('FPS: ' + fps + '/' + maxfps, 4, height - 4);
|
ctx.restore();
|
|
frameCount++;
|
}
|
|
init();
|
</script>
|