HTML5新特性 day_02(8.8)

视频DOM对象常用API文档

HTML 音频/视频参考手册

一、HTML5 Audio/Video

（一）HTML5 Audio/Video方法

（二）HTML5 Audio/Video 属性

 （三）HTML5 Audio/Video 事件

 

 网易云音乐接口文档： https://neteasecloudmusicapi.vercel.app/#/

改造一个视频播放器

player_video.html

二、Canvas

Canvas意为画布。用于在网页中绘制图形图像。

（一）Canvas基础图形绘制

基于Canvas绘制图像的基本写法如下：

基于Javascript绘制Canvas的基础API如下：

案例：01_canvas.html

 填充矩形

 描边矩形

绘制文本

 

 Canvas绘图API参考手册：

HTML Canvas 参考手册

案例：绘制一个柱状图。[120, 200, 150, 80, 70, 110, 130]

 

 Canvas的路径

路径（Path）是将一组坐标点按照顺序连接起来所形成的图形。

Canvas绘制路径时的API：

1. 调用ctx.beginPath()开启一条新路径。

2. 调用ctx.moveTo(x, y)将画笔移动到某一个起始点。

3. 调用ctx.lineTo(x, y)向目标点(x,y)绘制直线路径。

4. 调用ctx.stroke()对路径进行描边、ctx.fill()对闭合路径进行填充。

案例：绘制一个三角形。03_path.html

案例：移动端的手绘板

在移动端平台下，通过手指触摸可以在canvas中绘制手指移动经过的路径。这就需要监听canvas元素的touch相关事件（移动端触摸所涉及到的事件）。

touch相关事件主要包含以下几类：

touchstart : 开始触摸时触发

touchmove: 当手指在元素上触摸移动时触发

touchcancel： 当触摸事件被打断时触发

touchend： 当触摸结束时触发

实现一个手写板，本质上就是：

1. 在开始触摸时，开启一条新路径并将画笔移动到此处。

2. 当触摸并移动时，需要实时捕获移动到的目标点，将现有路径连接该目标点，绘制描边即可显示路径效果。

案例：04_board.html