前端为什么要啃原生 Canvas 绘图

现在很多业务页面都要求展示动态图表、实时大屏或交互式报表。多数前端遇到这类需求，第一反应是直接调 Echarts 的配置项，能跑通就行。但一旦产品要求定制特殊形状、做复杂动画联动，或者遇到性能瓶颈，只会用现成组件就会卡壳。这门课解决的核心问题，就是帮你补齐底层的绘图原理。它没有花大量篇幅堆砌业务大屏的炫酷案例，而是从 Canvas 的基础路径、样式操作讲起，带你弄懂浏览器是怎么把代码变成像素的。如果你正被复杂图表的二次开发折磨，或者想往前端可视化方向转岗，这种从底层逻辑切入的思路比单纯背组件 API 更有用。

适合什么基础与建议先看的重点

这套资料不适合完全零基础的人，你需要有扎实的 HTML 和 CSS 基础，能熟练使用 JavaScript 操作 DOM。课程前期的概念对比部分可以快速过一遍，重点建议放在中后段的实战模块。从画线、矩形到弧形和曲线的章节，是建立坐标系和路径操作手感的关键，不要跳过。随后关于全局透明度、阴影以及 transform 组合变换的内容，是很多人平时写图表时经常知其然而不知其所以然的盲区，直接关系到你能否精准控制图形的位移与旋转。建议在学习时，不要只盯着视频看，必须打开编辑器，跟着每一节的代码把基础图形敲一遍，理解每一次坐标变化背后的数学逻辑。

学完能独立做什么与资料配合方式

把这套资料吃透，你能脱离第三方图表库的束缚，独立用原生代码绘制并控制复杂图形。课程里安排了封装图形库和原生时钟的实战，这两个练习非常考验对绘图全局思想的掌控。学完后，面对公司内部的数据大屏需求，你不仅能熟练接入 Echarts，还能在组件不满足时，自己用 Canvas 画定制化的图元和动画。配合资料练习时，建议先把每节课的概念在本地跑通，然后尝试改参数，比如把课程里的时钟拆解成其他仪表盘指针，或者把饼图实战的代码改成环形图。通过这种强制自己改写代码的方式，把别人的思路内化成自己的手感，才算真正把这门可视化的底子打扎实。


01 数据可视化开发-1

课程目录

*   01 数据可视化开发-1/

  *   01 课程介绍、入门知识/

    *   01 前端开发为什么要学“数据可视化”

    *   02 canvas、SVG、webGL的区别与关系

  *   02 从零开始使用canvas/

    *   01 画线、认识路径操作

    *   02 canvas绘图样式、操作顺序

    *   03 文字操作

    *   04 line操作、路径操作

    *   05 透明度、阴影、canvas的全局思想

    *   06 更多形状：rect矩形操作、canvas动画原理

    *   07 更多形状：弧操作、饼图实战

    *   08 更多形状：曲线

  *   03 canvas transform/

    *   01 深入transform、组合变换-上

    *   02 深入transform-下

    *   03 实战：自己动手封装图形库-上

    *   04 实战：自己动手封装图形库-下

    *   05 实战：canvas时钟 原生版-上

    *   06 实战：canvas时钟 原生版-中

    *   07 实战：canvas时钟 原生版-下

    *   08 实战：canvas时钟 zanvas版-上

    *   09 实战：canvas时钟 zanvas版-下

  *   04 canvas图片操作、实战游戏开发-上/

    *   01 图片批量加载逻辑、drawImage基础

    *   02 详解drawImage、序列动画

    *   03 一切都是图片

    *   04 实战：小游戏-1 背景、图片加载逻辑

    *   05 实战：小游戏-2 炮台、炮塔

    *   06 实战：小游戏-3 旋转逻辑

    *   07 实战：小游戏-4 炮弹发射

  *   05 canvas事件处理、实战游戏开发-下/

    *   01 canvas事件机制、path检测

    *   02 实战：小游戏-5 按钮处理、封装

    *   03 实战：小游戏-6 鱼的生成

    *   04 实战：小游戏-7 优化、删除失效对象

    *   05 实战：小游戏-8 碰撞检测

    *   06 实战：小游戏-9 渔网、捕鱼动画、概率逻辑

    *   07 实战：小游戏-10 金币动画、分数逻辑

    *   08 实战：小游戏-11 金币逻辑、分数动画、总结

  *   06 canvas的导入、导出、像素操作/

    *   01 认识base64、canvas的导入导出-上

    *   02 认识blob、canvas导入导出-下

    *   03 另一种保存canvas图形的方法

    *   04 canvas像素操作

  *   07 实战：多人共享绘图板/

    *   01 项目搭建、布局

    *   02 从最简单的线开始

    *   03 画圆工具、动态配置工具

    *   04 重绘逻辑、矩形工具

    *   05 绘制逻辑封装、配置对象

    *   06 撤销操作、保存图像

    *   07 多人协作绘图

  *   08 实战：canvas实时视频处理/

    *   01 video绘制、动画使用

    *   02 提取像素、滤镜处理

  *   09 zrender库操作canvas/

    *   01 认识zrender库

    *   02 基础操作：图形、事件、属性

    *   03 画布操作

    *   04 更多形状、silent、group

    *   05 更多形状-下

    *   06 动画操作

  *   10 实战：zrender/

    *   01 项目搭建、工具选择

    *   02 绘制模块、重用

    *   03 操作区划分、颜色选择-上

    *   04 颜色选择-下

  *   11 echarts图表库-基础/

    *   01 认识echarts

    *   02 vue+echarts

    *   03 react+echarts

  *   12 深入echarts-option详解/

    *   01 axis坐标轴

    *   02 series数据

    *   03 title标题

    *   04 tooltip提示框

    *   05 toolbox工具条

    *   06 legend图例

    *   07 datazoom显示范围

  *   13 深入echarts-各图表类型详解/

    *   01 line折线图、bar柱状图

    *   02 pie饼图

    *   03 scatter散点图

    *   04 radar雷达图

    *   05 graph图

    *   06 tree树状图

    *   07 treeMap树图

    *   08 gauge仪表盘

  *   14 实战-1《618战报》数据大屏项目-上/

    *   01 数据可视化适用场景、项目预览

    *   02 vue3前端项目搭建-组件拆分-上

    *   03 vue3前端项目搭建-组件拆分-下

    *   04 websocket数据接入

    *   05 typescript数据model

  *   15 实战-1：《618战报》数据大屏项目-下/

    *   01 基础数据填充

    *   02 大额订单列表

    *   03 实时订单走势图

    *   04 bmap销售区域地图

    *   05 销售终端统计

    *   06 word cloud热门搜索词

  *   16 实战-2：电商平台 数据报表/

    *   01 项目介绍

    *   02 组件划分、数据获取

    *   03 摘要数据

    *   04 时间线、渠道来源

    *   05 热门商品

    *   06 库存提示

  *   17 实战-3：电商平台 数据报表 移动端/

    *   01 项目介绍、组件划分

    *   02 数据交互、摘要数据

    *   03 移动端echarts、销售曲线、渠道信息

    *   04 热门商品图、缺货信息

  *   数据可视化开发-课程资料.zip