一、引言

在用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. 【LeetCode】Search Insert Position(搜索插入位置)

    这道题是LeetCode里的第35道题. 题目描述: 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引.如果目标值不存在于数组中,返回它将会被按顺序插入的位置. 你可以假设数组中无重复元 ...

  2. 【LeetCode】Merge Two Sorted Lists(合并两个有序链表)

    这道题是LeetCode里的第21道题. 题目描述: 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1-&g ...

  3. 201621123034 《Java程序设计》第1周学习总结

    1. 本周学习总结 知道了java的用途有安卓手机应用,企业服务器后端,java web.学到了新概念:类.HelloWorld.java 中 HelloWorld 是主文件名,区分 .java和 . ...

  4. pat 1074. 宇宙无敌加法器(20)

    1074. 宇宙无敌加法器(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 地球人习惯使用十进制数,并且默 ...

  5. POJ3311 Hie with the Pie

    The Pizazz Pizzeria prides itself in delivering pizzas to its customers as fast as possible. Unfortu ...

  6. *LOJ#2134. 「NOI2015」小园丁与老司机

    $n \leq 5e4$个平面上的点,从原点出发,能从当前点向左.右.上.左上或右上到达该方向最近的给定点.问三个问:一.最多经过多少点:二.前一问的方案:三.其所有方案种非左右走的边至少要开几辆挖掘 ...

  7. [LeetCode] Binary Search Tree Iterator 深度搜索

    Implement an iterator over a binary search tree (BST). Your iterator will be initialized with the ro ...

  8. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---21

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  9. Android开发基础（java）1

    基本概念: 一.结构化方法与结构化程序设计 1.结构化方法:源自迪克斯特拉(E.W.Dijkstra)提出的结构化概念,采用自顶向下.逐步求精的模块化设计方法.核心是将工作分成若干个相互独立的模块,使 ...

  10. 【linux】进程存储管理

    看<Linux高级程序设计>的笔记 设有一个hello的可执行文件 ①显示该文件的基本信息 ls hello -l ②文件基本情况 file hello ③列出文件的存储区域情况 size ...