HTML5（二）音频视频画布

HTML5 Audio(音频)

定义和用法#

Copy
<audio src="someaudio.wav" controls="controls"> 您的浏览器不支持 audio 标签。 </audio>

提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

音频格式的MIME类型#

Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

属性#

属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
muted muted 规定视频输出应该被静音。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。

最小Demo代码#

Copy
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>audio</title>
</head>
<body>
	<audio src="someaudio.wav" controls="controls"> 您的浏览器不支持 audio 标签。 </audio>
</body>
</html>

src可以修改自己的本地路径，请注意调节音量再播放

《光》陈粒#

HTML5 Video(视频)

Copy
<video src="movie.mp4" controls="controls"> 您的浏览器不支持 video 标签。 </video>

视频格式#

格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML5 Audio/Video 方法#

方法 描述
addTextTrack() 向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频类型
load() 重新加载音频/视频元素
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频

只是常用的一些方法，具体用到更多再查。

最小Demo代码#

Copy
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<video src="video.mp4" controls="controls"> 您的浏览器不支持 video 标签。 </video>
</body>
</html>

HTML5 Canvas

HTML5 canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

Copy
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>

创建canvas元素， 再使用 style 属性来添加边框。

颜色、样式和阴影#

属性 描述
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
方法 描述
createLinearGradient() 创建线性渐变（用在画布内容上）
createPattern() 在指定的方向上重复指定的元素
createRadialGradient() 创建放射状/环形的渐变（用在画布内容上）
addColorStop() 规定渐变对象中的颜色和停止位置

Canvas - 渐变#

Copy
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas</title>
</head>
<body>
	<div>
		<div> 线性渐变:</div>
		<canvas id="myCanvas" width="200" height="200"></canvas>
	</div>
	<div>
		<div> 径向/圆渐变:</div>
		<canvas id="myCanvas2" width="200" height="200"></canvas>
	</div>
	<script>
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		 
		// 创建渐变
		var grd=ctx.createLinearGradient(0,0,200,0);
		grd.addColorStop(0,"red");
		grd.addColorStop(1,"white");
		 
		// 填充渐变
		ctx.fillStyle=grd;
		ctx.fillRect(10,10,150,80);

		var c=document.getElementById("myCanvas2");
		var ctx=c.getContext("2d");
		 
		// 创建渐变
		var grd=ctx.createRadialGradient(75,50,5,90,60,100);
		grd.addColorStop(0,"red");
		grd.addColorStop(1,"white");
		 
		// 填充渐变
		ctx.fillStyle=grd;
		ctx.fillRect(10,10,150,80);
	</script>
</body>
</html>

线条样式#

属性 描述
lineCap 设置或返回线条的结束端点样式
lineJoin 设置或返回两条线相交时，所创建的拐角类型
lineWidth 设置或返回当前的线条宽度
miterLimit 设置或返回最大斜接长度

矩形#

方法 描述
rect() 创建矩形
fillRect() 绘制“被填充”的矩形
strokeRect() 绘制矩形（无填充）
clearRect() 在给定的矩形内清除指定的像素

路径#

方法 描述
fill() 填充当前绘图（路径）
stroke() 绘制已定义的路径
beginPath() 起始一条路径，或重置当前路径
moveTo() 把路径移动到画布中的指定点，不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线（用于创建圆形或部分圆）
arcTo() 创建两切线之间的弧/曲线
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false

Canvas - 路径#

Copy
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>video</title>
</head>
<body>
	<canvas id="myCanvas" width="200" height="100"
		style="border:1px solid #000000;">
	</canvas>
	<script>
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		ctx.beginPath();
		ctx.arc(95,50,40,0,2*Math.PI);
		ctx.stroke();
	</script>
</body>
</html>

转换#

方法 描述
scale() 缩放当前绘图至更大或更小
rotate() 旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()

文本#

属性 描述
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
方法 描述
fillText() 在画布上绘制“被填充的”文本
strokeText() 在画布上绘制文本（无填充）
measureText() 返回包含指定文本宽度的对象

Canvas - 文本#

Copy
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas</title>
</head>
<body>
	<canvas id="myCanvas" width="200" height="200"></canvas>
	<script>
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		ctx.font="30px Arial";
		ctx.fillText("小橘子ღ",10,100);
		ctx.strokeText("Hi~ Canvas",10,50);
	</script>
</body>
</html>

图像绘制#

方法 描述
drawImage() 向画布上绘制图像、画布或视频

Canvas - 图像#

Copy
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas</title>
</head>
<body>
	<img id="scream" src="https://pic.cnblogs.com/avatar/1979230/20200321083100.png" alt="小橘子ღ">
	<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"> 您的浏览器不支持 canvas 标签。</canvas>
	<script>
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		var img = document.getElementById("scream"); 
		
		ctx.drawImage(img, 10, 10)//若不显示画像则注释这行，取消注释下面三行
        
		// img.onload = function(){
		//     ctx.drawImage(img, 10, 10)
		// }
		
	</script>
</body>
</html>

注意：这里有个坑，考虑到图片是从网络加载，如果 drawImage 的时候图片还没有完全加载完成，则什么都不做。即绘图失败。

所以我们应该保证在 img 绘制完成之后再 drawImage。

Copy
var img = new Image();   // 创建img元素
img.src = 'https://pic.cnblogs.com/avatar/1979230/20200321083100.png'; // 设置图片源地址
img.onload = function(){
    ctx.drawImage(img, 0, 0)
}

像素操作#

属性 描述
width 返回 ImageData 对象的宽度
height 返回 ImageData 对象的高度
data 返回一个对象，其包含指定的 ImageData 对象的图像数据
方法 描述
createImageData() 创建新的、空白的 ImageData 对象
getImageData() 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData() 把图像数据（从指定的 ImageData 对象）放回画布上

合成#

属性 描述
globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上

进阶操作

posted @   小橘子ღ  阅读(263)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何调试 malloc 的底层源码
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
阅读排行：
· 25岁的心里话
· 因为Apifox不支持离线，我果断选择了Apipost！
· 零经验选手，Compose 一天开发一款小游戏！
· Trae 开发工具与使用技巧
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示
CONTENTS
✕