一、引言

在用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. c++ primer 读书笔记

    顺序容器:为程序提供控制元素存储和访问顺序的能力,这种顺序与元素加入到容器时的位置相对应,而与元素值无关. 另外还有根据关键字的值来存储元素的容器:有序.无序关联容器. 另外STL还有三种容器适配器, ...

  2. Redhat/CentOS安装vsftp软件

    1.更新yum源 首先需要更新系统的yum源,便捷工具下载地址:http://help.aliyun.com/manual?spm=0.0.0.0.zJ3dBU&helpId=1692 2.安 ...

  3. 【bzoj3091】城市旅行 LCT区间合并

    题目描述 输入 输出 样例输入 4 5 1 3 2 5 1 2 1 3 2 4 4 2 4 1 2 4 2 3 4 3 1 4 1 4 1 4 样例输出 16/3 6/1 题解 LCT区间合并 前三个 ...

  4. 记一次 pip list --outdated 错误

    在 Windows CMD 执行 pip list --outdated,出现如下错误:" [WinError 10061] 由于目标计算机积极拒绝,无法连接",原因是我之前用的源 ...

  5. BZOJ 4826 [Hnoi2017]影魔 ——扫描线 单调栈

    首先用单调栈和扫描线处理出每一个数左面最近的比他大的数在$l[i]$,右面最近的比他大的数$r[i]$. 然后就可以考虑每种贡献是在什么时候产生的. 1.$(l[i],r[i])$产生$p1$的贡献 ...

  6. nodejs+express+mongodb搭建博客

    https://github.com/lanleilin/sayHelloBlog 是可以运行的 https://github.com/lanleilin/sayHelloBlog 文件结构如下: c ...

  7. c#.net前台调用JS文件中的函数[.net与JavaScript的应用]

    原文发布时间为:2008-10-10 -- 来源于本人的百度文章 [由搬家工具导入] <%@ Page Language="C#" AutoEventWireup=" ...

  8. python编程（python开发的三种运行模式）【转】

    转自:http://blog.csdn.net/feixiaoxing/article/details/53980886 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 单循环 ...

  9. 例说linux内核与应用数据通信系列【转】

    转自:http://blog.csdn.net/shallnet/article/details/47865169 版权声明:本文为博主原创文章,未经博主允许不得转载.如果您觉得文章对您有用,请点击文 ...

  10. nslookup命令详解【转】

    转自:http://blog.chinaunix.net/uid-28933499-id-3750357.html NSlookup命令的用法 用了域名服务器后,经常要查询域名的解析情况,nslook ...