buglas/canvas-lesson

canvas 从入门到放飞自我

课程简介

这是《canvas 从入门到放飞自我》系列课程的所有代码，当前有三部分：

01-基础篇：零基础入门canvas，讲述canvas常用的API方法，比如图形、样式、图像、文字、合成等。

02-矩阵变换：将模型矩阵、视图投影矩阵、裁剪空间等多个矩阵与 canvas 内置矩阵无缝对接，实现对任意图形的灵活变换。 最后会使用实战项目-《T 恤图案编辑器》夯实大家的所学。

03-面试题：以我进滴滴时遇到的三个经典面试题为主导，讲述常见的canvas面试题。此课程为付费课程，课程价格会随课程内容的增加有所涨幅，但我会坚持低价原则。

开发当前课程的原因

开发本套canvas课程的目的是因为我喜欢。

我本艺术出身，在十年前接触到了canvas，觉得它可以让我的画笔更加自由，所以就跟着感觉走，走上了前端可视化的道路。

我第一次用canvas 施展拳脚是在京东，那时候我们前端组里只有我一人会canvas，这让我有了一个小小的技术壁垒，可以有更多的时间去学习。

我曾在京东物流主导过仓储可视化项目的开发，我为其开发了一个原生canvas渲染引擎，这让我收获颇丰，使我认识到了图形学至关重要的作用。

canvas 可以让我们将一些三维问题简化为二维问题，从而更好的理解图形学，更好的学习三维的WebGL、three.js等。

当然，canvas 的简单快捷也是我们绘制二维图形的首选，就比如希沃白板、T恤图案编辑器、智驾项目中常用到的3D投2D、标注等。

canvas 对于批量的二维图形的渲染速度不一定会低于WebGL或WebGPU的GPU渲染，这是我测试过的。

canvas 的发展潜力和活力依旧是很大的，它并不会因为三维图形学技术的发展而被排挤。

就比如我去年面试滴滴的时候，就是用canvas做的面试题，因为它简单快捷，而面试官想看的也只是其中的图形学算法。

我计划在本套canvas 课程里，引入数学、图形学、物理、渲染引擎等知识。

当然，canvas 不适用于三维图形，三维的世界更加精彩，在三维图形学方面，我会再出一些WebGL、three.js 或者WebGPU相关的课程。

更多精彩，敬请期待……

关于我

我的博客：https://www.yxyy.name/blog/

掘金：https://juejin.cn/user/87572001856951/columns

B站视频：https://space.bilibili.com/1028978784

微信：1051904257