Canvas绘制音乐播放器

aiguangyuan

已于 2022-07-20 17:05:41 修改

阅读量1.3k

点赞数 2

分类专栏： HTML 文章标签：前端开发 HTML Canvas

于 2019-06-27 10:42:11 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/93853360

版权

HTML 专栏收录该内容

35 篇文章 4 订阅

订阅专栏

给大家分享一个用Canvas绘制音乐播放器的代码，主要向大家介绍在Canvas绘图中解决常见的两个问题。多个图片一起绘制时，如何处理好渲染完成时间差？如何给Canvas绘制的图片绑定事件？

绘图效果如下：

实现代码如下：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Canvas绘制音乐播放器</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Canvas绘制音乐播放器</h1>
    <canvas id="c2"></canvas>

    <script>
        // 处理多图渲染完成时间差
        // 所有图片的总加载进度
        var progress = 0;

        var imgBg = new Image();
        imgBg.src = 'images/bg.jpg';
        imgBg.onload = function () {
            console.log('1 背景图片加载完成');
            // 分别按图片大小设置权重
            progress += 20;
            // 如果加载完成
            if (progress === 100) {
                // 开始绘制
                startDraw();
            }
        };

        var imgDisc = new Image();
        imgDisc.src = 'images/disc.png';
        imgDisc.onload = function () {
            console.log('2 封面图片加载完成');
            progress += 40;
            if (progress === 100) {
                startDraw();
            }
        };


        var imgPlay = new Image();
        imgPlay.src = 'images/play.png';
        imgPlay.onload = function () {
            console.log('3 播放图片加载完成');
            progress += 20;
            if (progress === 100) {
                startDraw();
            }
        };

        var imgPause = new Image();
        imgPause.src = 'images/pause.png';
        imgPause.onload = function () {
            console.log('4 暂停图片加载完成');
            progress += 20;
            if (progress === 100) {
                startDraw();
            }
        };

        function startDraw() {
            var w = imgBg.width;
            var h = imgBg.height;
            c2.width = w;
            c2.height = h;
            var ctx = c2.getContext('2d');

            //1 绘制背景图
            ctx.drawImage(imgBg, 0, 0);

            //2 绘制黑色的胶片
            ctx.beginPath();
            ctx.arc(w / 2, h / 2, 120, 0, 2 * Math.PI);
            ctx.fill();

            //3 绘制胶片封面
            var left = 120 * Math.sin(Math.PI / 4);
            ctx.drawImage(imgDisc, w / 2 - left, h / 2 - left, 2 * left, 2 * left);

            //4 绘制播放/暂停按钮
            ctx.drawImage(imgPlay, w / 2 - 40, h - 80, 80, 80);

            // 如何为Canvas上的图形/图像绑定事件监听
            // 思路：为Canvas绑定监听，计算事件发生点到圆形按钮的中心点距离是否小于半径
            c2.onclick = function (e) {
                // 事件发生坐标
                var ex = e.offsetX;
                // 事件发生坐标
                var ey = e.offsetY;
                // 圆形按钮圆心X坐标
                var rx = w / 2;
                // 圆形按钮圆心y坐标
                var ry = h - 40;
                // 圆形按钮的半径
                var r = 40;
                // 计算两个点间距，是否小于圆形半径
                if (Math.sqrt((ex - rx) * (ex - rx) + (ey - ry) * (ey - ry)) <= r) {
                    console.log('播放按钮被点击')
                }
            }
        }
    </script>
</body>

</html>