项目4：HTML5新特性
黑龙江旅游职业技术学院 · 《网页设计与制作》
授课教师：刘继峰
🎯 教学目标
知识目标

掌握 HTML5 Canvas 画布的基本概念与坐标系原理；理解 <audio> 和 <video> 标签的常用属性及兼容性处理。

能力目标

能够使用 JS 在 Canvas 上绘制几何图形（如音频插孔）；能独立编写代码实现网页音视频播放器的嵌入与控制。

素质目标

培养对前端新技术的探索精神；通过多媒体交互设计提升用户体验意识；养成规范的代码编写习惯。

🎨 任务1：Canvas 绘图基础

目标：利用 Canvas API 绘制一个“音频输出插孔”图标，学习路径、圆弧和填充颜色的使用。

🛠️ 绘制步骤

  1. 获取画布上下文：通过 getContext('2d') 获取绘图环境。
  2. 绘制外圆：使用 arc() 方法绘制黑色大圆作为插孔底座。
  3. 绘制内环：绘制同心圆环，模拟金属触点效果。
  4. 绘制中心点：在圆心绘制一个小实心圆，完成插孔造型。

🎬任务2：多媒体标签应用

HTML5 引入了原生的音频和视频支持，不再依赖 Flash 插件。

1. 音频标签 <audio>

<audio controls autoplay loop>
  <source src="music.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>
  • controls: 显示播放控件（播放/暂停/音量）。
  • autoplay: 页面加载后自动播放（现代浏览器通常要求静音才能自动播放）。
  • loop: 循环播放。

2. 视频标签 <video>

<video width="320" height="240" controls poster="cover.jpg">
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持 video 元素。
</video>
  • width/height: 设置视频播放器的尺寸。
  • poster: 视频加载前显示的封面图片。
  • preload: 预加载策略 (auto, metadata, none)。
📝 随堂测试

请完成以下题目，检验本节课的学习成果：

1. 在 Canvas 中绘制圆形路径的方法是？
2. 想要在网页中嵌入视频并显示控制条，应使用哪个属性？
🎓 课堂总结
知识点 核心内容 掌握程度
Canvas 基础 获取上下文 (getContext), 路径绘制 (beginPath, arc), 填充与描边 ⭐⭐⭐⭐⭐
Audio 标签 src 属性, controls 控件, 兼容性处理 (source) ⭐⭐⭐⭐
Video 标签 宽高设置, poster 封面, 自动播放策略 ⭐⭐⭐⭐

🏠 课后作业

基础题：修改本节课的 Canvas 代码，尝试绘制一个红色的五角星。

拓展题：制作一个简单的个人主页，要求包含一个背景音乐（默认静音）和一个自我介绍视频。