4

このコードで複数のキャンバスを単一で描画する方法は?

コードを使用して単一のキャンバスを描画できます。

私はすべてのキャンバスとページ6キャンバスごとに異なるyデータを持っています.how to draw a single page.

最適化のコード サンプルを教えてください。

ここに画像の例があります： ここに画像の説明を入力

これが私の単一のキャンバス描画コードです:

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

1 に答える 1

2

この種のことは何年も前に行いました。簡単な例をまとめました。

Bergi が言うように、任意のデータを任意のキャンバスに描画する関数を作成する必要があります。この例は、webkitAudioContext を使用して、MOD プレーヤーやデモ音楽プレーヤーで使用されるようなシンセサイザーです。サンプルをクリックして聞くことができます。

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

シンセ コアは、VoxelBukkake という疑わしい名前の c++(c? - 忘れた) グラフィックス/サウンド デモに由来します。

オーディオ コンテキストを初期化した後、キャンバスとそれに関連付けられたオーディオ データを追加するのは次のように簡単です。

addPlayableGraph(hihat);

編集：

サンプル画像: ここに画像の説明を入力

于 2013-10-13T19:17:51.520 に答える