¿Cómo dibujar múltiples canvass en una sola página?

Cómo dibujar múltiples canvass en solo para este código?

Puedo dibujar un solo canvas usando mi código.

Tengo diferentes datos y para cada canvas y por página 6 canvas. Cómo dibujar en una sola página.

¿Puedes dar un ejemplo de ejemplo de código optimizado?

aquí hay una image de ejemplo: enter image description here

Aquí está mi único dibujo del canvas Código:

<!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> 

Hizo este tipo de cosas hace siglos. Acabo de hackear un ejemplo rápido para ti.

Como dice Bergi, necesitas hacer una function que dibuje datos arbitrarios en un canvas arbitrario. Este ejemplo es un sintetizador como los que se usan en los reproductores MOD y reproductores de música de demostración, utilizando webkitAudioContext. Puede hacer clic en una muestra para escucharlo.

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

El núcleo de sintetizador proviene de una demostración de charts / sonido c ++ (c? – I forget) con el dudoso nombre VoxelBukkake

Después de inicializar el context de audio, agregar un canvas y sus datos de audio asociados es tan simple como:

 addPlayableGraph(hihat); 

EDITAR:

Una image de muestra: enter image description here