从空白画布到能动手画东西：这门课补的是什么？
很多同学学 HTML5 Canvas 时，卡在两个地方：一是不知道“为什么用它”——觉得它只是画图表或游戏的专属，离日常业务很远；二是知道语法但手不会动，看到文档里的 `beginPath`、`moveTo`、`arc` 一堆方法，却不知道在真实项目里怎么组合起来实现一个具体需求。这门课解决的核心问题，正是把 Canvas 从“高深图形学”拉回“前端基础技能”的层面，让你掌握一种直接操作像素、动态绘制图形的通用能力。它不教你写复杂的 3D 引擎，而是帮你打通“创建画布 → 处理兼容 → 绘制基础图形 → 封装复用”这条最基础也最实用的链路。如果你正在备考前端相关认证，或者转岗中遇到 DOM 操作熟悉但 Canvas 完全空白的能力缺口，这部分内容正是你需要系统性补齐的一块。
适合谁看、建议先看哪几块？
本课程适合已经掌握 HTML 和 JavaScript 基础语法，但对 Canvas API 缺乏实际操作经验的学习者。不需要有游戏开发或图形渲染背景，但需要你能独立写出基本的函数调用和事件监听。建议的学习顺序非常明确：先从第 1-1 节理解 Canvas 在整个前端技术栈中的定位，再紧接 1-2 节掌握如何在项目中安全地创建画布并做好低版本浏览器的兼容处理——这是很多初学者容易忽略但实际项目必须面对的坑。接着按 1-3 到 1-6 的顺序逐步上手绘制矩形、三角形、弧线、圆形和虚线，每一节都聚焦一个核心 API 的使用场景。当基础图形绘制熟练后，再进入第 2 节的七巧板案例，这个案例的价值在于强制你把前面学的零散方法组合起来，完成一个完整的小项目。不要跳着看，Canvas 的绘图逻辑是累积型的，前序步骤的理解深度直接影响后续案例的流畅度。
学完能做什么、资料怎么配合练习？
完成本课程后，你将能够独立在网页中创建 Canvas 元素，处理跨浏览器兼容性，并使用路径 API 绘制多种基础几何图形，包括设置线宽、颜色、填充样式以及虚线效果。更重要的是，你会具备将重复绘图逻辑封装为可复用函数的能力，这直接对应七巧板案例中的实践目标。为了达到这个效果，课程配套的资料包并非静态文档，而是包含分步实现的代码片段和可运行的示例环境。建议你在观看每一节视频时，暂停并手动输入代码，而不是直接复制粘贴——Canvas 的坐标系统和绘图状态机（如 `save`/`restore`）只有通过亲手调试才能真正内化。课后练习务必独立完成七巧板绘制，这是检验你是否真正理解“图形组合”与“方法封装”的关键试金石。如果能在不看参考的情况下重现七巧板的所有板块并正确布局，说明你已经跨过了 Canvas 入门的最大门槛。
课程目录
1-1 [canvas画板学习的整体介绍以及基本使用] canvas专题的课程整体的介绍 (15:00) 1-2 [canvas画板学习的整体介绍以及基本使用] 在项目中创建canvas以及js如何做兼容处理 (15:00) 1-3 [canvas画板学习的整体介绍以及基本使用] 通过canvas绘制执行 (15:00) 1-4 [canvas画板学习的整体介绍以及基本使用] 绘制矩形，三角形图形 (15:00) 1-5 [canvas画板学习的整体介绍以及基本使用] 绘制弧线以及指定线宽度和线条颜色，填充色 (15:00) 1-6 [canvas画板学习的整体介绍以及基本使用] 绘制圆形以及绘制虚线 (17:00) 2-1 [通过开发七巧板案例以及封装方法来绘制虚线的案例来巩固基础知识] 绘制七巧板以及封装绘制虚线的方法 (15:00) 2-2 [通过开发七巧板案例以及封装方法来绘制虚线的案例来巩固基础知识] 如何封装方法来绘制任意的一条虚线（二） (15:00) 2-3 [通过开发七巧板案例以及封装方法来绘制虚线的案例来巩固基础知识] 如何封装方法来绘制任意的一条虚线（三） (15:00) 2-4 [通过开发七巧板案例以及封装方法来绘制虚线的案例来巩固基础知识] 如何封装方法来绘制任意的一条虚线（四） (15:00) 3-1 [在画板中把导入的图片绘制出来以及对图片进行各种处理] 创建图片对象以及绘制到画板中 (15:00) 3-2 [在画板中把导入的图片绘制出来以及对图片进行各种处理] 对图片绘制在画板中的各种情况进行说明 (10:57) 3-3 [在画板中把导入的图片绘制出来以及对图片进行各种处理] 图片绘制在画板中的各种情况进行说明（二） (14:59) 3-4 [在画板中把导入的图片绘制出来以及对图片进行各种处理] 图片绘制在画板中的各种情况进行说明（三） (15:00) 3-5 [在画板中把导入的图片绘制出来以及对图片进行各种处理] 图片绘制在画板中的各种情况进行说明（四） (15:00) 3-6 [在画板中把导入的图片绘制出来以及对图片进行各种处理] 图片绘制在画板中的各种情况进行说明（五） (07:50) 4-1 [针对画板中的图形可以进行各种变化：移动，旋转和缩放] 复习上节课讲解的知识点 (15:00) 4-2 [针对画板中的图形可以进行各种变化：移动，旋转和缩放] 复习上节课讲解的知识点（二） (15:00) 4-3 [针对画板中的图形可以进行各种变化：移动，旋转和缩放] 图形变化：移动，缩放，旋转 (15:00) 4-4 [针对画板中的图形可以进行各种变化：移动，旋转和缩放] 图形变化：移动，缩放，旋转（二） (15:00) 4-5 [针对画板中的图形可以进行各种变化：移动，旋转和缩放] 图形变化：移动，缩放，旋转（三） (21:00) 5-1 [对画板中的内容下载并且保存到本地] 在画板中导入本地图片并且绘制出来 (15:00) 5-2 [对画板中的内容下载并且保存到本地] 在画板中导入本地图片并且绘制出来（二） (15:00) 5-3 [对画板中的内容下载并且保存到本地] 在画板中导入本地图片并且绘制出来（三） (15:00) 6-1 [配合计时器来完成图形中绘制的动画以及介绍综合案例的需求梳理] 配合计时器开发让矩形水平方法左右移动 (15:00) 6-2 [配合计时器来完成图形中绘制的动画以及介绍综合案例的需求梳理] 配合计时器开发让矩形沿着中心点进行选择 (15:00) 6-3 [配合计时器来完成图形中绘制的动画以及介绍综合案例的需求梳理] 配合计时器开发让矩形水平方向边旋转边移动 (15:00) 6-4 [配合计时器来完成图形中绘制的动画以及介绍综合案例的需求梳理] 配合计时器开发让矩形水平方向边旋转边移动 (15:00) 7-1 [通过鼠标按下移动抬起来控制在画板中模拟铅笔绘制线条的过程] 通过鼠标按下移动抬起来控制在画板中模拟铅笔绘制线条的过程 (15:00) 7-2 [通过鼠标按下移动抬起来控制在画板中模拟铅笔绘制线条的过程] 梳理涂鸦板APP案例开发的流程 (06:32)
