[移动开发]HTML5（音视频，canvas画布，定位....）

音频与视频

HTML5提供了相关标签支持在网页中实现音频与视频的播放。

音频标签

音频标签支持的文件格式有：WAV、MP3、ogg。

音频标签的简单使用方法：

<audio src="../assets/xxxx.mp3" controls></audio>

音频标签的标准使用方法：

<audio controls>
	<source src="xxx.mp3" type="audio/mpeg"/>
    <source src="xxx.wav" type="audio/wav"/>
    <source src="xxx.ogg" type="audio/ogg"/>
    什么破浏览器，换一个吧~
</audio>

audio的常用属性

<audio	controls	是否显示播放器控制面板
       	src=""
       	autoplay    是否在加载完毕后自动播放
       	muted		是否静音
       	loop		是否单曲循环
       	preload="预加载模式"></audio>

preload:

1. none 不预加载
2. metadata 只预加载元数据
3. auto 尽可能的加载音频数据

视频标签

简写方式：

<video src=""		 视频文件的链接路径
       controls
       autoplay
       muted
       loop
       width=""      视频播放器的宽度
       height=""  	 视频播放器的高度
       poster=""	 海报帧图片路径
></video>

音视频相关的DOM操作

我们可以通过Javascript获取音视频的DOM对象。

可以通过访问对象的属性，调用对象的方法来访问音视频播放状态，控制音视频的播放。

<audio id="audio" src="./let.mp3"></audio>
<script>
	let audio = document.getElementById('audio')
    audio.duration   属性  返回时长
    audio.play()     方法  播放视频
</script>

查看DOM相关文档：

https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

HTML5 Audio/Video 属性

let audio = document.getElementById('audio')
audio.currentTime
audio.duration

HTML5 Audio/Video 方法

HTML5 Audio/Video 事件

audio.addEventListener('abort', function (){
    当音频/视频的加载已放弃时执行
})
audio.addEventListener('play', function(){
    
})
audio.addEventListener('pause', function(){
    
})

实现简易音乐播放器

https://neteasecloudmusicapi.vercel.app/#/?id=license

Canvas

canvas意为“画布”。我们可以使用javascript操作画布上的任何一个像素，从而实现在网页中绘制图像。常用于：

1. 网页特效。
2. 网页游戏。
3. 图形图表。

canvas的基本使用

<canvas id="cvs" width="640" height="360"></canvas>

绘制API：

let cvs = document.getElementById('cvs')
let ctx = cvs.getContext('2d')    //  获取绘制Canvas所需要的Context对象
ctx.fillStyle = 'red'  // 设置填充颜色
ctx.fillRect()         // 填充矩形

绘制填充

ctx.fillStyle = 'red'  					// 设置填充颜色
ctx.fillRect(x, y, width, height)       // 填充矩形

绘制描边

ctx.strokeStyle = 'blue'				// 设置描边颜色
ctx.strokeRect(x, y, width, height)		// 针对矩形描边

绘制文本

ctx.font = '24px 微软雅黑'				// 设置字体
ctx.fillText('文本内容', x, y)      	// 填充文字
ctx.strokeText('文本内容', x, y)		// 针对文字描边

Canvas路径

什么是路径？

将一些连续的点按照顺序连接起来所形成的图形称为路径。 路径没有颜色，可以通过API对路径进行描边。若想要填充路径，需要先闭合路径。

绘制路径的基本写法

1. 调用ctx.beginPath()开启一条新路径。
2. 调用ctx.moveTo(x, y)将画笔移动到某一个坐标点。
3. 调用ctx的相关方法（例如ctx.lineTo(x, y) ）绘制路径。
4. 路径绘制完毕后，调用stroke()或fill()来进行描边或填充。