3

Tenho uma animação em "html5 Canvas" (usando Flot Real Time) e agora preciso que ela seja clonada em tempo real para um novo canvas, ou seja, desenhar a mesma coisa em 2 canvas ao mesmo tempo.

Então simplesmente tentei dar um copy da imagem, mas claro que ficou lento, causando um flicker:

var c   = document.getElementById('placeholder');
var ctx = c.getContext('2d');
var imgData = ctx.getImageData(0, 0, 300, 500);

var imageNow = document.querySelector('#placeholder2');
var ctxImageNow = imageNow.getContext('2d');
ctxImageNow.putImageData(imgData, 0, 0); 



Nas minhas pesquisas percebi que usando buffers, isso fica fácil,
mas não entendi a mecânica e não sei como aplicar no meu exemplo.

canvas { border: 2px solid #000; position:absolute; top:0;left:0; 
visibility: hidden; }

Buffers[1-DrawingBuffer].style.visibility='hidden';
Buffers[DrawingBuffer].style.visibility='visible';

DrawingBuffer=1-DrawingBuffer;

var context = Buffers[DrawingBuffer].getContext('2d');

Meu exemplo e muito semelhante ao fornecido pelo flot realtime coloquei ele aqui:

$(function() {
  // info for graph2
  instant = 5;
  high = -45;
  factor = 0;
  frequency = 15;
  updateInterval = 70;
	var data1 = [], data2 = [], totalPoints = 300;

  function Easing( i ) {
      i *= 2;
      if (i<1) return 1/(2-i)-.5;
      return 1.5-1/i;
  }

	function getRandomData() {
    // original j-flot randon data, nao precisamos neste exemplo..
  }
  function getRandomData2() {
    // nosso grafico, DESTE nos  precisamos....
  
    // se adrenalina ON  sobre o grafico
    if(isRunning==true){
      if(factor<1) {
        factor=factor+.005;    
        frequency=frequency+.25;
      }
    } 
    // se adrenalina OFF  desce o grafico
	else {
      if(factor>0) {
        factor=factor-.005;    
        frequency=frequency-.25;
      }
    }
      
    if (data2.length > 0)
      data2 = data2.slice(1);
    while (data2.length < totalPoints) {
        instant = instant - frequency;
        calc = high - Easing(factor) * 35;
        if (instant < calc ) {
          instant = (calc * -1);
        }
        instantShow = instant;
        if (instantShow < 20) {
          instantShow = 20;
        }
        data2.push(instantShow);
    }
    var res = [];
    for (var i = 0; i < data2.length; ++i) {
      res.push([i, data2[i]])
    }
    //console.log(data2);
    return res;
  }
	//
  // Set up the control widget
  $("#updateInterval").val(updateInterval).change(function() {
    var v = $(this).val();
    if (v && !isNaN(+v)) {
      updateInterval = +v;
      if (updateInterval < 1) {
        updateInterval = 1;
      } else if (updateInterval > 2000) {
        updateInterval = 2000;
      }
      $(this).val("" + updateInterval);
    }
  });
  var plot = $.plot("#placeholder", [{
    data: getRandomData()
  }, {
    data: getRandomData2()
  }], {
    series: {
      shadowSize: 0
    },
    yaxis: {
      min: 0,
      max: 100
    },
    xaxis: {
      show: false
    }
  });
  function update() {
    plot.setData([{
      data: getRandomData()
    }, {
      data: getRandomData2()
    }]);
    plot.draw();
    setTimeout(update, updateInterval);
  }
  update();
});


//
// buttons
//

var isRunning = false;
document.getElementById('button').onclick = function()
{
    if (isRunning){
    	document.getElementById('button').innerHTML = "<font color=red>Sem Adrenalina</font>";
    }
    else{
    	document.getElementById('button').innerHTML = "<font color=green>Com Adrenalina</font>";
    }
    isRunning = !isRunning;
};
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>

<div id="placeholder" style="height:300px; width:500px; border:solid 1px red; ">
</div>

<button id="button" onmousedown="buttonAdrenaline">
  <font color=red>
    Sem Adrenalina
   </font>
</button>

<hr>

<div id="placeholder2" style="height:300px; width:500px; border:solid 1px blue;">
</div>

Alguém poderia me ensinar a resolver isso? preciso colocar a mesma animação em dois canvas distintos..

1
  • Você quer copiar o conteudo junto com a animação, ou passar apenas o efeito para outros "elementos" dentro canvas?
    – Syzoth
    Commented 18/12/2016 às 14:31

1 Resposta 1

2

Ao invés de fazer todo o trabalho de copiar, para cada update da animação você terá que copiar novamente, isso é torna tão trabalhoso para ti quanto para o navegador executar, você pode simplesmente adicionar os parâmetros do $.plot para duas variáveis:

var dataAnimation = [{
  data: getRandomData()
}, {
  data: getRandomData2()
}]

var optsAnimation = {
  series: {
    shadowSize: 0
  },
  yaxis: {
    min: 0,
    max: 100
  },
  xaxis: {
    show: false
  }
};

E criar adicionar o $.plot para cada elmento:

var plot1 = $.plot("#placeholder", dataAnimation, optsAnimation);
var plot2 = $.plot("#placeholder2", dataAnimation, optsAnimation);

E no update basta adicionar o setData para ambos objetos:

function update() {
  var data = [{
    "data": getRandomData()
  }, {
    "data": getRandomData2()
  }];

  plot1.setData(data);
  plot2.setData(data);
  plot1.draw();
  plot2.draw();
  setTimeout(update, updateInterval);
}

Exemplo completo

$(function() {
  // info for graph2
  instant = 5;
  high = -45;
  factor = 0;
  frequency = 15;
  updateInterval = 70;
    var data1 = [], data2 = [], totalPoints = 300;

  function Easing( i ) {
      i *= 2;
      if (i<1) return 1/(2-i)-.5;
      return 1.5-1/i;
  }

    function getRandomData() {
    // original j-flot randon data, nao precisamos neste exemplo..
  }
  function getRandomData2() {
    // nosso grafico, DESTE nos  precisamos....

    // se adrenalina ON  sobre o grafico
    if(isRunning==true){
      if(factor<1) {
        factor=factor+.005;
        frequency=frequency+.25;
      }
    }
    // se adrenalina OFF  desce o grafico
    else {
      if(factor>0) {
        factor=factor-.005;
        frequency=frequency-.25;
      }
    }

    if (data2.length > 0)
      data2 = data2.slice(1);
    while (data2.length < totalPoints) {
        instant = instant - frequency;
        calc = high - Easing(factor) * 35;
        if (instant < calc ) {
          instant = (calc * -1);
        }
        instantShow = instant;
        if (instantShow < 20) {
          instantShow = 20;
        }
        data2.push(instantShow);
    }
    var res = [];
    for (var i = 0; i < data2.length; ++i) {
      res.push([i, data2[i]])
    }
    //console.log(data2);
    return res;
  }
    //
  // Set up the control widget
  $("#updateInterval").val(updateInterval).change(function() {
    var v = $(this).val();
    if (v && !isNaN(+v)) {
      updateInterval = +v;
      if (updateInterval < 1) {
        updateInterval = 1;
      } else if (updateInterval > 2000) {
        updateInterval = 2000;
      }
      $(this).val("" + updateInterval);
    }
  });

  var dataAnimation = [{
    data: getRandomData()
  }, {
    data: getRandomData2()
  }];

  var optsAnimation = {
    series: {
      shadowSize: 0
    },
    yaxis: {
      min: 0,
      max: 100
    },
    xaxis: {
      show: false
    }
  };

  var plot1 = $.plot("#placeholder", dataAnimation, optsAnimation);
  var plot2 = $.plot("#placeholder2", dataAnimation, optsAnimation);

  function update() {
    var data = [{
      "data": getRandomData()
    }, {
      "data": getRandomData2()
    }];

    plot1.setData(data);
    plot2.setData(data);
    plot1.draw();
    plot2.draw();
    setTimeout(update, updateInterval);
  }
  update();
});

var isRunning = false;
document.getElementById('button').onclick = function()
{
    if (isRunning){
        document.getElementById('button').innerHTML = "<font color=red>Sem Adrenalina</font>";
    }
    else{
        document.getElementById('button').innerHTML = "<font color=green>Com Adrenalina</font>";
    }
    isRunning = !isRunning;
};
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>

<div id="placeholder" style="height:300px; width:500px; border:solid 1px red; "></div>

<button id="button" onmousedown="buttonAdrenaline">
  <font color=red>
    Sem Adrenalina
   </font>
</button>

<hr>

<div id="placeholder2" style="height:300px; width:500px; border:solid 1px blue;"></div>

1
  • 2
    Nossa! entendi!! muito simples!! e eu nem tinha pensado nisso... vergonha.. :( ... tenho muito o que aprender... BRIGADA! Commented 18/12/2016 às 23:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .