javascript – 如何在单页中绘制多个画布？

2023年3月17日 151次阅读

如何为此代码单个绘制多个画布？

我可以使用我的代码绘制单个画布.

我为每个画布和每页6画布提供不同的y数据.如何在单页中绘制.

你能给出优化代码示例吗？

这是示例图像：

这是我的单画布画代码：

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

最佳答案 很久以前这种事情发生了吗？我刚刚为你编写了一个快速示例.

正如Bergi所说 – 你需要创建一个能够在任意画布上绘制任意数据的函数.这个例子是一个像MOD播放器和演示音乐播放器中使用的合成器,使用webkitAudioContext – 你可以点击一个样本来听它.

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

合成器核心来自c(c？ – 我忘记)图形/声音演示,其名称为VoxelBukkake

初始化音频上下文后,添加画布及其关联的音频数据非常简单：

addPlayableGraph(hihat);

编辑：

示例图片：

点赞