【学习笔记】二、HTML5多媒体与Canvas画布

本文链接：https://blog.csdn.net/m0_58875335/article/details/127269571

一、网络视频，音频与视频

类别	标签/属性	示例
音频标签	<audio> 用来显示所链接的音频	<audio src="[音频所在的地址]" ></audio>
音频标签中的属性	controls 用来显示控件	<audio src="[音频所在的地址]" controls></audio>
音频标签内的其它格式标签	<source/> 插入不同格式的音频，识别第一个可识别的格式，audio内不写src（相当于备选项）	<audio controls > <source src="音频URL" /> <source src="音频URL" /> </audio>
视频标签	<video>	<video src="[视频所在地址]"></video>
视频标签内属性	和音频一样，需要controls才能让视频可见	<video src="[视频所在地址]" controls></video>
视频标签内属性	poster 设置视频封面（图片尺寸要和视频大小相同）	<video src="[视频所在地址]" controls poster="[图片地址]"></video>
音频标签内的其它格式标签	<source/> 插入不同格式的音频，识别第一个可识别的格式，audio内不写src（相当于备选项）	<audio controls > <source src="视频URL" /> <source src="视频URL" /> </audio>

二、Canvas画布(用到JS）

<canvas>标签用于绘制图像（通过脚本），其本身没有绘制能力，相当于一张画布，实际绘图需要使用脚本

getContex()方法可返回一个上下文对象，该对象提供了用于在画布上绘图的方法和属性

类别	标签/属性	示例
画布标签	<canvas>	<canvas></canvas>
画布属性	Id/height/width，id、高、宽	<canvas id="" height="" width=""></canvas>
对画布颜色的设置	在css样式内用id设置背景颜色background-color:	background-color:yellow;

1.用js获取画布的方法

<style type="text/css">
#canv{
background-color: burlywood;//画布背景颜色
}
</style>
<body>
<canvas id="canv" height="500" width="500"></canvas>
</body>
<script type="text/javascript">
var canv = document.getElementById("canv");//用变量从id获取内容
var canva = canv.getContext("2d");//用变量获取到方法，获取到2D的画布（平面）
</script>

2.绘制的方法

*画布靠坐标点定位绘图，其中x与y轴都是正数，与数学中不同；以及画布左上角为画布0，0。

*调用方法和属性方法都需要用到变量，如上方我定义的名称是hbn，则下方都要写成如hbn.moveTo()进行使用。

moveTo()	把路径移动到画布中的指定点（不创建线条）也就是起点
lineTo()	落点，目标点
stroke()	绘制已创建的路径
closePath()	闭合线路，结束绘制，创建从当前点回到起始点的路径
beginPath()	起始一条路径或重置当前路径；重新再去绘制一条路径
rect(x,y,w,h)	创建矩形（括号内前两个为起点位置，后两个分别是宽高）
fill()	填充绘制的图形，默认为黑色

3.绘图属性方法

storkeStyle=	设置或返回笔触的颜色，渐变或模式（线颜色）
fillStyle=	填充绘制的图形的颜色
lineWidth=	线条的宽度（粗细）