как рисовать несколько холстов на одной странице?

Как нарисовать несколько холстов в одном для этого кода?как рисовать несколько холстов на одной странице?

Я могу нарисовать одно холст, используя мой код.

У меня разные данные y для каждого холста и на странице 6 холстов. Как рисовать на одной странице.

не могли бы вы оптимизировать пример примера кода?

вот пример изображения: enter image description here

Вот мой одиночный холст ничья Код:

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    </head> 
    <body> 
     <canvas id="canvas" width="160" height="160" style="background-color: black;"></canvas> 
     <script type='text/javascript'> 

      var canvas = document.getElementById("canvas"); 
      var ctx = canvas.getContext("2d"); 
      ctx.fillStyle = "#dbbd7a"; 
      ctx.fill(); 

      var fps = 60; 
      var n = 1; 


      var data = [ 
       148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82, 
       148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82, 
       148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82, 
       148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82, 
       148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82, 
       148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82, 
       148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82, 
       148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82, 
       148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82, 
       148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82, ]; 


      drawWave(); 

      function drawWave() { 
       setTimeout(function() { 
        requestAnimationFrame(drawWave); 
        ctx.lineWidth = "2"; 
        ctx.strokeStyle = 'green'; 

        // Drawing code goes here 
        n += 1; 
        if (n >= data.length) { 
         n = 1; 
        } 
        ctx.beginPath(); 
        ctx.moveTo(n - 1, data[n - 1]); 
        ctx.lineTo(n, data[n]); 
        ctx.stroke(); 

        ctx.clearRect(n+1, 0, 10, canvas.height); 

       }, 1000/fps); 
      } 

     </script> 
    </body> 
</html>

источник

2013-10-13 purBin

Пожалуйста, сначала попросите свой сценарий рисовать несколько изображений, прежде чем говорить об оптимизации. Используйте функцию, для которой задан элемент '

Не используйте 'setTimeout' * и *' requestAnimationFrame', но только один из них. Для стабильной анимации вы также должны учитывать фактическое текущее время ('Date.now()'). – Bergi

что-то вроде этого? http://jsfiddle.net/ezCL9/ –

ли такая вещь много веков назад. Я просто взломал для вас быстрый пример.

Как говорит Берги - вам нужно создать функцию, которая будет произвольно отображать произвольные данные на произвольном холсте. Этот пример - это синтезатор, подобный тем, которые используются в проигрывателях MOD и демонстрационных музыкальных проигрывателях, с использованием webkitAudioContext - вы можете щелкнуть по образцу, чтобы услышать его.

JSFiddle: http://jsfiddle.net/enhzflep/rsNZB/

Ядро синт происходит от C++ (? С - я забыл) графику/звук демо с сомнительным названием VoxelBukkake

После инициализации звуковой контекст, добавив, холст, и это связано аудиоданные так же просто, как:

addPlayableGraph(hihat);

РЕДАКТИРОВАТЬ:

образец изображения: enter image description here

источник

2013-10-13 19:17:51 enhzflep

Можете ли вы дать образец для моего примера? – purBin

удивительный. где вы получили свои инструменты от ..? получил ссылку? – dmp

nevermind, получил это;) хороший порт его кода на C++. http://www.pouet.net/prod.php?which=20171 – dmp

как рисовать несколько холстов на одной странице?

ответ

Смежные вопросы