【重点突破】——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