一、引言

在用Canvas练习制作了验证码之后，还有一个用Canvas技术很综合的练习——制作音乐播放器。在做这个练习的过程中，还有一个重要的观察点，那就是理解Canvas的一大问题。

二、要求 

  • 点击播放按钮，碟片开始旋转，背景音乐开始播放
  • 再次点击播放按钮，碟片停止旋转，背景音乐停止播放

三、问题

1、在canvas中放进4个图片请求，1、2、3、4，会以什么顺序加载？按顺序？

实际：绝不会以顺序加载，因为，异步请求，会同时加载4张图片。

所以：Canvas绘图中若需要多张图片，他们的加载都是异步的，无法预测哪一张先加载完成。

2、但是绘图往往需要按照一定的顺序，如先绘制背景，再绘上面的内容。怎么办？

方法：必须等待所有图片全部加载完成，才能开始绘图。

四、实现

思路：先在最外层定义一个变量 progress=0 表示所有图片的总加载进度；在每一个图片加载完成之后，按文件大小占总文件的比例分配权重，比如img1占20%，就给progress +=20；再然后，判断progress是否全等于100，等于100时，执行startDraw()函数，开始绘制图片，如果不等于，则不绘制；最后在最外层的底部，定义startDraw()函数。

难点;如何为Canvas上的图形图像绑定事件监听？

方法：只能绑定给整个Canvas！然后再具体计算事件发生坐标是否处于某个图像/图形的内部——仅适用于规则图形。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            text-align:center;

        }

    </style>

</head>

<body>

    <h3>Canvas制作音乐播放器</h3>

    <canvas id="c2"></canvas>

    <script>

        var progress = 0;//所有图片的总加载进度

        var imgBg = new Image();

        imgBg.src = 'image/bg.jpg';

        imgBg.onload = function(){

            console.log('1 背景图片加载完成');

            progress += 20;//按文件大小所占比例加权重

            if(progress===100){

                stratDraw();

            }

        }

        var imgDisc = new Image();

        imgDisc.src = 'image/disc.png';

        imgDisc.onload = function(){

            console.log('2 封面图片加载完成');

            progress += 40;//按文件大小所占比例加权重

            if(progress===100){

                stratDraw();

            }

        }

        var imgPlay = new Image();

        imgPlay.src = 'image/play.png';

        imgPlay.onload = function(){

            console.log('3 播放图片加载完成');

            progress += 20;//按文件大小所占比例加权重

            if(progress===100){

                stratDraw();

            }

        }

        var imgPause = new Image();

        imgPause.src = 'image/pause.png';

        imgPause.onload = function(){

            console.log('4 暂停图片加载完成');

            progress += 20;//按文件大小所占比例加权重

            if(progress===100){

                stratDraw();

            }

        }

        function stratDraw(){

            console.log('开始绘图……');

            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);//r,起始角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);

            c2.onclick = function(e){

                var ex = e.offsetX;

                var ey = e.offsetY;

                var rx = w/2;   //圆形按钮圆形坐标

                var ry = h-40;

                var r = 40;     //圆形按钮的半径

                //计算两个点间距，是否小于圆形半径

                if((Math.sqrt((ex-rx)*(ex-rx)+(ey-ry)*(ey-ry)))<r){

                    alert("按钮被点击了……")

                }

              }

         }

    </script>

</body>

</html>

效果：

 注：转载请注明出处

【重点突破】——Canvas技术绘制音乐播放器界面的更多相关文章

  1. iOS 简单音乐播放器 界面搭建

    如图搭建一个音乐播放器界面,具备以下几个简单功能: 1,界面协调,整洁. 2,点击播放,控制进度条. 3.三收藏歌曲,点击收藏,心形收藏标志颜色加深. 4,左右按钮,切换歌曲图片和标题. 5,点击中间 ...

  2. canvas 视频音乐播放器

    canvas 视频音乐播放器 var play_nor_img_path = 'images/play_btn_n.png'; //播放按钮 正常时 60x60 px var play_sec_img ...

  3. SE Springer小组之《Spring音乐播放器》可行性研究报告三、四

    3 对现有系统的分析 由于本次可行性分析主要是建立在团队自行实现一个音乐软件的目标上,并不是在一个现有系统的基础上开发改进的新系统.因此这里将分析一款市面上已经存在的音乐软件(以下称为W音乐),并为之 ...

  4. 【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）

    这是之前写的用H5制作的音乐播放器,前三节其实已经做得差不多了,音轨的制作原理已经在上一节说明,不过一直还没有和音乐对接. 本章作为该系列的一个完结篇,我会专门把动态音轨的实现代码贴出来,demo地址 ...

  5. 音乐播放器 EasyMusic (一)

    EasyMusic 一. 代码获取 github 上链接为 https://github.com/VincentWYJ/EasyMusic, 感兴趣的朋友可以同步下来看, 欢迎提出宝贵意见或建议. 1 ...

  6. iOS开发拓展篇—音频处理（音乐播放器1）

    iOS开发拓展篇—音频处理(音乐播放器1) 说明:该系列文章通过实现一个简单的音乐播放器来介绍音频处理的相关知识点,需要重点注意很多细节的处理. 一.调整项目的结构,导入必要的素材 调整后的项目结构如 ...

  7. Flex4/Flash开发在线音乐播放器 , 含演示地址

    要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...

  8. 网页播放音频、视频文件——基于web的html 5的音乐播放器（转载）

    文章转载自:开源中国社区 [http://www.oschina.net] 想通过手机客户端(支持 Android.iPhone 和 Windows Phone)访问开源中国:请点这里 HTML5 是 ...

  9. Android应用--简、美音乐播放器增加音量控制

    Android应用--简.美音乐播放器增加音量控制 2013年6月26日简.美音乐播放器继续完善中.. 题外话:上一篇博客是在6月11号发的,那篇博客似乎有点问题,可能是因为代码结构有点乱的原因,很难 ...

随机推荐

  1. python IDLE简介及使用技巧

    前言:本人环境windows 7 64位,python2.7 IDLE简介: 是python 的可视化GUI编辑器 可以逐行输入命令 可方便的进行复制.粘贴等操作 常用命令行命令: import mo ...

  2. sql2008查看备份进度

    SELECT session_id, request_id, start_time, status, command, sql_handle --,statement_start_offset, st ...

  3. 直接选择排序(java)

    直接选择排序的逻辑非常简单,数组{A1.......An}  先在{A1........An}去获取最小的  与A1交换位置   然后在{A2..........An}中取出最小的  与A2交换位置. ...

  4. windows下命令行

    创建文件夹 mkdir 文件夹名字 创建文件 echo >文件名字 输入文件内容

  5. MFC编程入门之二十八（常用控件：列表视图控件List Control上）

    前面一节中,讲了图片控件Picture Control,本节为大家详解列表视图控件List Control的使用. 列表视图控件简介 列表视图控件List Control同样比较常见,它能够把任何字符 ...

  6. BZOJ 3931 网络吞吐量（最短路+拆点最大流）

    3931: [CQOI2015]网络吞吐量 Time Limit: 10 Sec  Memory Limit: 512 MB Submit: 1607  Solved: 652 [Submit][St ...

  7. 秀秀的照片（photo）

    秀秀的照片(photo) 题目描述 华华在和秀秀视频时有截很多图.华华发现秀秀的每一张照片都很萌很可爱.为什么会这样呢?华华在仔细看过秀秀的所有照片后,发现秀秀的照片都具有一个相同的性质. 设秀秀的分 ...

  8. [暑假集训--数论]poj1061 青蛙的约会

    Description 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事 ...

  9. Js 中 == 与 === 的区别

    1.对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较“转化成同一类型后的值”看“值”是否相等,===如果类型不同,其结果就是不等 2)同类型比较,直接进 ...

  10. Java学习路线-基础篇！

    下面以黑马程序员Java学院的学习路线为例,进行一次史无前例的剖析,我会采取连载的形式,细致的讲解零基础的人怎么学习Java.先看下Java在基础阶段的知识点路线图. 内容多吗?不要被吓到了,知识点剖 ...