这篇博客主要探讨了如何使用Canvas技术来绘制音乐播放器界面，包括点击播放按钮时碟片旋转和音乐播放的功能。文章指出在Canvas中加载多张图片的异步性质及其对绘图顺序的影响，并提出了等待所有图片加载完成后再进行绘制的解决方案。同时，介绍了如何为Canvas上的图形绑定事件监听，特别是对于规则图形的方法。
【重点突破】——Canvas技术绘制音乐播放器界面
一、引言
在用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
最低0.47元/天 解锁文章
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
