个人中心
gpt4 book ai didi

javascript - 如何在HTML5中使用动态数组连续绘制 Canvas 波？

转载 作者：行者123 更新时间：2023-12-03 02:36:15 27 4
gpt4 key购买 nike

这是我的问题

1)我有动态y数组数据，使用该数组如何连续绘制波浪。

如果Y数组数据完整，则使用相同的y数组数据继续。

2)声音自动播放在该数组值是143.if我停止不停止。

这是我的代码:

<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 = 1000;
            var n = 0;

            var myAudio = new Audio("http://www-mmsp.ece.mcgill.ca/documents/AudioFormats/WAVE/Samples/AFsp/M1F1-uint8WE-AFsp.wav"); // buffers automatically when created
            myAudio.addEventListener('ended', function() {
                this.currentTime = 0;
                this.play();
            }, false);

            animate();
            function animate() {
                setTimeout(function () {
                    requestAnimationFrame(animate);
                    ctx.lineWidth="2";
                    ctx.strokeStyle='green';
                    ctx.clearRect(0, 0, canvas.width, canvas.height);

                // y axixs Data

                var Ydata = [
                            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,
                          ];

                    // Drawing code goes here
                    n += 1.5;
                    if (n > 200) {
                        n = 0;
                    }
                    ctx.beginPath();
                    for (var x = 0; x < n; x++) {
                        if(Ydata[x] == '143')
                           myAudio.play();

                        ctx.lineTo(x, Ydata[x]);
                    }
                ctx.stroke();

            }, 1000/fps);
        }

        function stopAlarm()
        {
            myAudio.pause();
            myAudio.currentTime = 0;

        }

        </script>
        <button type="button" name="Stop" id="Stop" onclick="stopAlarm();">Stop Alarm</button>
    </body>
</html>

最佳答案

对我来说，要执行的操作不是很清楚，但是很快检查一下代码，我会发现一个错误，如果n可以是199，并且Ydata中有140个元素，则有时会出现异常，

如果您尝试在某种类型的循环中使用“动画”，则应尝试通过setInterval更改setTimeOut:

http://www.w3schools.com/jsref/met_win_setinterval.asp

关于javascript - 如何在HTML5中使用动态数组连续绘制 Canvas 波？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19287832/

27 4 0
文章推荐： asp.net-mvc - 清理模板中用作布局的 Razor 语法
文章推荐： javascript - 当我发出 get 请求时请求方法选项
文章推荐： javascript - 使用 Jest 进行测试 - 重置/清除由测试函数设置的变量并捕获控制台日志
文章推荐： oracle - 如何使用记录循环引用游标？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com