canvas
<canvas> 是 HTML5 引入的一个强大元素，它允许通过 JavaScript 在网页上绘制图形。下面是对 <canvas> 标签的全面介绍：
基本用法
<canvas id="myCanvas" width="500" height="300">
您的浏览器不支持 canvas 元素
</canvas>
- id：用于 JavaScript 获取该元素
- width 和 height：设置画布尺寸（单位是像素）
- 标签内的内容会在浏览器不支持 canvas 时显示
JavaScript 绘图基础
// 获取 canvas 元素
const canvas = document.getElementById('myCanvas');
// 获取绘图上下文
const ctx = canvas.getContext('2d');
// 绘制一个红色矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);
主要绘图功能
1. 绘制形状
// 矩形
ctx.fillRect(x, y, width, height); // 填充矩形
ctx.strokeRect(x, y, width, height); // 描边矩形
// 路径
ctx.beginPath();
ctx.moveTo(50, 50); // 起点
ctx.lineTo(150, 50); // 直线
ctx.arc(100, 100, 50, 0, Math.PI*2); // 圆弧
ctx.closePath(); // 闭合路径
ctx.fill(); // 填充路径
ctx.stroke(); // 描边路径
2. 样式设置
ctx.fillStyle = 'blue'; // 填充颜色
ctx.strokeStyle = '#FF0000'; // 描边颜色
ctx.lineWidth = 5; // 线宽
ctx.lineCap = 'round'; // 线端形状
ctx.font = '30px Arial'; // 字体
3. 绘制文本
ctx.fillText('Hello World', 10, 50); // 填充文本
ctx.strokeText('Hello World', 10, 50); // 描边文本
4. 图像操作
const img = new Image();
img.src = 'image.png';
img.onload = function() {
ctx.drawImage(img, 0, 0); // 绘制图像
};
5. 变换
ctx.translate(100, 100); // 移动原点
ctx.rotate(Math.PI/4); // 旋转
ctx.scale(2, 2); // 缩放
ctx.save(); // 保存当前状态
ctx.restore(); // 恢复之前保存的状态
高级特性
1. 动画
function animate() {
requestAnimationFrame(animate);
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制动画帧
// ...
}
animate();
2. 像素操作
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// 操作像素数据
ctx.putImageData(imageData, 0, 0);
3. WebGL (3D 图形)
const gl = canvas.getContext('webgl');
// 使用 WebGL API 绘制 3D 图形
实际应用
<canvas> 常用于：
- 数据可视化（图表）
- 游戏开发
- 图像编辑器
- 交互式动画
- 特效和过渡效果
注意事项
- 画布大小应该通过 HTML 属性或 JavaScript 设置，而不是 CSS（CSS 会拉伸内容）
- 绘制大量元素时注意性能优化
- 移动设备上可能有性能限制
- 不同浏览器可能有细微的实现差异
canvas 提供了丰富的 API，可以创建从简单图形到复杂交互应用的各类视觉效果。
音视频
HTML5 引入了 <audio> 和 <video> 标签，使得在网页中嵌入和播放多媒体内容变得非常简单，无需依赖 Flash 等插件。
<audio> 音频标签
基本用法
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持 audio 元素
</audio>
主要属性
| 属性 | 说明 |
|---|---|
src | 音频文件路径 |
controls | 显示播放控件（播放/暂停、音量等） |
autoplay | 音频就绪后自动播放 |
loop | 循环播放 |
muted | 静音 |
preload | 预加载（auto/metadata/none） |
JavaScript 控制
const audio = document.querySelector('audio');
// 播放
audio.play();
// 暂停
audio.pause();
// 设置音量 (0.0-1.0)
audio.volume = 0.5;
// 跳转到指定时间（秒）
audio.currentTime = 30;
<video> 视频标签
基本用法
<video width="640" height="360" controls poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持 video 元素
</video>
主要属性
| 属性 | 说明 |
|---|---|
src | 视频文件路径 |
poster | 视频封面图 |
width/height | 视频显示尺寸 |
controls | 显示播放控件 |
autoplay | 自动播放 |
loop | 循环播放 |
muted | 静音 |
preload | 预加载 |
playsinline | 在移动端内联播放（不自动全屏） |
JavaScript 控制
const video = document.querySelector('video');
// 播放
video.play();
// 暂停
video.pause();
// 跳转到指定时间
video.currentTime = 60;
// 全屏
video.requestFullscreen();
// 检测是否暂停
if (video.paused) {
video.play();
} else {
video.pause();
}
通用功能
事件监听
const media = document.querySelector('audio') || document.querySelector('video');
media.addEventListener('play', () => {
console.log('开始播放');
});
media.addEventListener('ended', () => {
console.log('播放结束');
});
media.addEventListener('timeupdate', () => {
console.log('当前播放时间:', media.currentTime);
});
常用事件
- play - 开始播放
- pause - 暂停
- ended - 播放结束
- timeupdate - 播放时间更新
- volumechange - 音量改变
- error - 发生错误
格式支持
音频格式
| 格式 | MIME 类型 | 浏览器支持 |
|---|---|---|
| MP3 | audio/mpeg | 广泛支持 |
| WAV | audio/wav | 广泛支持 |
| OGG | audio/ogg | Firefox, Chrome, Opera |
| AAC | audio/aac | Edge, Safari |
视频格式
| 格式 | MIME 类型 | 浏览器支持 |
|---|---|---|
| MP4 (H.264) | video/mp4 | 广泛支持 |
| WebM | video/webm | Firefox, Chrome, Opera |
| Ogg | video/ogg | Firefox, Chrome, Opera |
实际应用技巧
- 多源兼容性：提供多个 标签确保跨浏览器兼容
- 自定义控件：隐藏原生控件(controls)，用 JavaScript 实现自定义 UI
- 性能优化：使用 preload="metadata" 平衡加载性能与用户体验
- 移动端适配：添加 playsinline 属性防止 iOS 自动全屏
- 无障碍访问：为控件添加 ARIA 属性和键盘支持
注意事项：
- 移动浏览器可能限制自动播放，需要用户交互才能播放
- 不同浏览器支持的格式不同，应提供多种格式
- 大文件应考虑流媒体或分段加载
- 视频字幕可以使用
<track>元素添加
