这门课解决什么工作场景

很多前端开发者在做数据看板、大屏可视化或轻量级互动页面时，常面临一个选择：用复杂的图表库还是直接用原生 Canvas 画。原生方案的好处是包体小、渲染可控、不依赖第三方。这门 HTML5 课程聚焦的正是这块能力，它把 HTML5 规范里最实用的部分抽出来，解决“浏览器端原生图形绘制与数据通信”的问题。学完能独立做什么：你能脱离现成图表库，用 Canvas 从零绘制自定义的数据走势图、动态节点拓扑图，或结合 WebSocket 实现服务端数据实时推送与画面联动，做轻量级监控大屏。

适合什么基础与建议先看的部分

资料适合已掌握基础 HTML 和 CSS、能写简单页面但没系统接触过 HTML5 新特性的读者。如果你连基础标签都不熟，建议先补基础再看。拿到资料后，建议先看 HTML5 概述与浏览器支持判断，建立兼容性处理意识；接着重点看画布部分，从绘制直线、路径到描边填充，这是后续所有图形操作的底层逻辑。这部分内容按顺序递进，不要跳着看，因为路径关闭与填充的逻辑直接影响后续复杂图形的绘制结果。

资料怎么配合练习

资料是视频形式，但 Canvas 学习必须动手。建议每看完一个绘制技巧，立刻在本地编辑器写一遍代码并运行。比如看到渐变色和阴影时，自己尝试改参数看效果变化。不要只看不动，图形编程的参数调试感很强。练习时可以给自己定个小目标：用学到的路径、曲线、文本和阴影，画一个带数据标签的柱状图。如果遇到绘制错位或变形，回头查对应视频里的坐标计算逻辑。这样配合下来，资料才真正转化为你能独立调用的技能，而不是看过的视频。


让学员充分了解html5的新功能，例如，Canvas，web存储，websocket等。

课程目录

*   01 HTML5概述/

  *   01 HTML5的那些事.mp4 11:40

*   02 画布（Canvas）/

  *   01 HTML5 Canvas概述.mp4 11:05

  *   02 判断当前浏览器是否支持HTML5.mp4 06:55

  *   03 绘制直线.mp4 12:02

  *   04 关闭路径（closepath）.mp4 15:25

  *   05 描边和填充.mp4 03:21

  *   06 绘制矩形区域和曲线.mp4 11:35

  *   07 贴图.mp4 03:09

  *   08 渐变色.mp4 05:59

  *   09 平铺背景图.mp4 06:06

  *   10 缩放Canvas中的对象.mp4 03:10

  *   11 阴影和transform方法.mp4 08:12

  *   12 文本和阴影.mp4 03:40

*   03 音频和视频/

  *   01 音频和视频概述.mp4 10:20

  *   02 使用audio元素播放音频文件.mp4 03:04

  *   03 让浏览器选择要播放的视频格式.mp4 05:32

  *   04 用JavaScript控制audio元素播放和暂停音乐.mp4 05:16

  *   05 播放背景音乐.mp4 02:28

  *   06 播放视频.mp4 03:58

  *   07 获取视频中的静态图像.mp4 04:53

*   04 地理位置信息/

  *   01 地理位置API概述.mp4 06:50

  *   02 通过HTML5 GeoLocation API获取精度和纬度.mp4 09:44

*   05 WebSocket/

  *   01 WebSocket概述.mp4 06:12

  *   02 WebSocket案例演示.mp4 19:25

*   06 WebStorage/

  *   01 WebStorage概述.mp4 06:48

  *   02 检测浏览器是否支持WebStorage.mp4 06:56

  *   03 Cookie、LocalStorage和SessionStorage的区别.mp4 11:53

  *   04 LocalStorage和SessionStorage的使用方法.mp4 03:57

  *   05 Web SQL Database.mp4 06:51