Canvas FPS

Testa a velocidade de renderização de animação para graficos procedurais e imagens sob transformação, com e sem gradiente alpha.

(CanvasFPS) [%CALC{"$LISTJOIN(x, CanvasFPS)"}%]



Plot type:  

Style

#c {
  border: 1px solid #CCC;
}
#ctrl {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  padding: 10px 0 0 10px;
}
img {
  border: 1px dotted #999;
  width: 40px;
  float: right;
}

Script

"use strict";
rProc.click();
var ctx = c.getContext('2d');
var ccx = 250, ccy = 250; // canvas center.

function randInt(limit) {
  return Math.ceil( Math.random() * limit );
}

function randRGB() {
  return 'rgb('+randInt(256)+','+randInt(256)+','+randInt(256)+')';
}

function angleRGB(angle) {
  return 'rgb('+Math.round(255 * angle/(Math.PI*2) )+',0,0)';
}

var sin = Math.sin, cos = Math.cos;

function drawProc(cx, cy, rotate) {
  var r = parseFloat(size.value)/2;
  var tp = parseInt(paths.value);
  ctx.save();
  ctx.translate(cx,cy);
  ctx.rotate(rotate);
  ctx.strokeStyle = '#04F';
  for ( var i=0; i<tp; i++ ) {
    var angle = Math.PI * 2 * i / tp;
    if (grad.checked) {
      var grd = ctx.createLinearGradient(cos(angle)*r,sin(angle)*r,0,0);
      grd.addColorStop(0, angleRGB(angle));
      grd.addColorStop(1, 'rgba(0,0,0,0)');
      ctx.fillStyle = grd;
    }
    else ctx.fillStyle = angleRGB(angle);
    ctx.beginPath();
    ctx.moveTo(cos(angle)*r,sin(angle)*r);
    ctx.bezierCurveTo( cos(angle+1)*r,sin(angle+1)*r,
                       cos(angle-1)*r,sin(angle-1)*r,
                       0,0 );
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  }
  ctx.restore();
}

function drawMemImg(cx, cy, rotate) {
  var s = parseFloat(size.value);
  ctx.save();
  ctx.translate(cx, cy);
  ctx.rotate(rotate);
  //ctx.putImageData(memImg, cx-s/2, cy-s/2); <-- cant rotate
  ctx.drawImage(memImg, -s/2, -s/2);
  ctx.restore();
}

var requestFrame = window.requestAnimationFrame ||
                   window.webkitRequestAnimationFrame ||
                   window.mozRequestAnimationFrame ||
                   window.msRequestAnimationFrame ||
                   window.oRequestAnimationFrame;

var counter, startTime, drawFn, memImg;
function start() {
  drawFn = drawProc;
  if (<nop>rProc.checked) {
    drawFn = drawMemImg;
    var s = parseFloat(size.value);
    c.width = c.height = s;
    ctx.clearRect(0,0,s,s);
    drawProc(s/2, s/2, 0);
    memImg = new Image();
    memImg.src = c.toDataURL();
    c.width = ccx * 2;
    c.height = ccy * 2;
  }
  running.style.display = 'block';
  btRun.style.display = 'none';
  setTimeout(function(){
    counter = 0;
    startTime = Date.now();
    loop();
  }, 10);
}

function end() {
  var time = Date.now() - startTime;
  var fps = Math.round(100000/(time/counter))/totFrames;
  running.style.display = 'none';
  if (rProc.checked) var html = 'Desenho procedural.';
  else var html = 'Plot imagem.';
  html += ' Size: '+ size.value +'px, '+ paths.value +' paths, '+
          (grad.checked?'com':'sem') +' gradiente.<br>' +
          counter +' frames em <b>'+ time +'ms</b>.' +
          ' FPS = <b>'+ fps +'</b>';
  result.innerHTML += '<li>'+html+'</li>';
  btRun.style.display = 'inline-block';
}

var totFrames = 200;
function loop() {
  var s = parseFloat(size.value);
  ctx.clearRect(0,0,500,500);
  drawFn(cos(counter/20)*100+ccx, sin(counter/20)*100+ccy, counter/30);
  //drawFn(ccx, ccx, counter/10);
  if (++counter<totFrames) requestFrame(loop);
  else end();
}

Html

%3ccanvas%20id%3d%22c

Licenciado sob AfferoGPL


Você está em RaulHC Web Snippets CanvasFPS
Histórico: r1 — última revisão em 11 Oct 2014, por Aurélio