中国版 Cursor：家长们辅导孩子数学作业和少儿编程的好助手 CodeBuddy

作为一个学生家长，笔者下班之后，晚上需要给孩子辅导作业。我一直是国内某教培类 App 的付费用户，随着 ChatGPT 3.5 的发布之后，这款 App 在我手机上打开的频率越来越低。只是因为当时 ChatGPT 多模态能力还未臻完善，处理数学几何题目时我还是得依赖这款教培 App.

不过随着之后 ChatGPT 识图能力的大幅提高，我终于放弃了那款 App 的订阅，投入了 AI 工具的怀抱。

教培类 App 讲解几何题目时有个缺陷，里面的图都是老师手动批注，不太美观，下图是一个例子：

对于笔者这种完美主义晚期患者来说，之前我采用的方法是在 Powerpoint 里工工整整的把图画出来：

不过 Powerpoint 里画图非常费时间。因为笔者的本职工作是前端开发，所以很自然的想到，用 html + css 来绘制这些数学题目中的图表。后来随着 Cursor，Trae 这些 AI IDE 的发布，绘制一张图的时间缩短到1到2分钟，效率真的飞起。更妙的是既然是采用 html 编程，就可以随心所欲的添加动画效果，让学生能够更好地理解数学概念。

比如用动画展示圆锥体积公式的推导：

不过笔者日常工作，以及业余时间创作的 SAP UI5 Freestyle 和 SAP Fiori Elements 开发教程，用的工具都是 Visual Studio Code. 毫不夸张的说，Visual Studio Code 就是我的吃饭家伙。Cursor 和 Trae 虽好，但不太符合我几年来在 Visual Studio Code 里形成的使用习惯。

感谢 Visual Studio Code 良好的可扩展性和繁荣的生态圈，随着腾讯云代码助手 CodeBuddy 的发布，Visual Studio Code 瞬间具有了丝毫不逊于 Cursor 和 Trae 的 AI 编程能力。

Visual Studio Code 里搜索 CodeBuddy 即可免费下载：

CodeBuddy 安装完毕后，在 Visual Studio Code 左侧侧边栏，会多出一个与其交互的入口图标。

点击之后，就可以和 CodeBuddy 对话了。

下面以一道几何题为例来介绍腾讯云 CodeBuddy 的使用方法。

将一次函数 y = x + 3 的图像，绕其与 X 轴的焦点顺时针旋转 75 度，得到的图像对应的函数表达式是什么？

直接把上面这道题目以指令的形式发送给 CodeBuddy，也能立即得到答案，但这样就失去了作业辅导的意义。

将题目一步步进行拆解。

帮我开发一个网页，在 html 上绘制平面直角坐标系，并绘制出一次函数 y = x + 3 的图像

这样孩子既学了数学，又学了编程，一石二鸟。

首先要完成平面直角坐标系的绘制，然后在上面绘制一次函数 y = x + 3 的函数图像。

CodeBuddy 选择的是 HTML5 中的 canvas 来实现图像绘制。在 HTML5 中，canvas 元素提供了一个可通过 JavaScript 绘制图形的位图画布容器。

借助 canvas 的 2D 绘图上下文，开发者能够实时渲染路径、形状、文字、图像以及动画效果，用来呈现中学解析几何中的平面直角坐标系简直是牛刀小试。

CodeBuddy 给出的代码，点击 Apply 然后 Accept 即可在 Visual Studio Code 里进一步编辑和修改。实际上 CodeBuddy 生成的代码质量非常高，不需要任何修改即可直接运行。

而且代码逻辑清晰，在 window.onload 回调函数里，依次执行 drawGrid 绘制平面直角坐标系，然后执行 drawFunction 绘制一次函数图像。

这两个 draw function 内部，调用 canvas 的 context 提供的 API，实现落笔，划线和提笔等操作。成都的中小学信息技术课，学生们都学习了 Logo 编程语言，不少学生课外也学了 Scratch，Kitten 等编程语言，在有大人的指导下，掌握 JavaScript Canvas 这些简单的 API 不在话下。

而且此类任务对少儿编程来说一个好处就是能很快获得正反馈，能立即看到自己编程的输出效果。

浏览器直接打开 CodeBuddy 自动生成的 HTML 代码，y = x + 3 的函数图像就绘制完毕了。

接下来完成函数旋转的操作：

将这个一次函数，绕其与 X 轴的交点顺时针旋转 75 度，绘制出旋转后的函数图像。

CodeBuddy 的思考过程也会打印出来，正好拿来给孩子梳理这道题的解题思路。首先求出 y = x + 3 与 x 轴的交点（-3，0）.

然后根据旋转矩阵公式，把 y = x + 3 上每个点的坐标，带入旋转矩阵，求出新的点坐标。

至此 CodeBuddy 数学老师的职责已经结束，然后开始扮演编程老师，剖析要在前面基础上如何做修改，以便绘制旋转之后的函数。

CodeBuddy 新建了一个 function drawRotatedFunction, 专门用来绘制旋转之后的新函数图像。这里旋转的角度 75 作为输入参数 degrees 传递进来，在里面转换成逆时针弧度值，然后传递进旋转矩阵，计算出旋转之后的点的 X 和 Y 坐标。

最后原来的 drawFunction 函数调用这个新建的 drawRotatedFunction 函数。

这一步完成之后的效果：

至此纯粹的数学解题层面的图像绘制就已经完成了，可以让孩子动手开始求出上图绿色直线的解析式。

但是从少儿编程角度出发，可以增加一个需求：绘制一个按钮。当且仅当点击按钮之后，才触发从红色直线旋转75度的动画效果。

也就是说，要实现下列的动画效果：

发出指令：

给 html 增加一个按钮，当且仅当该按钮被点击之后，才真正执行 y = x + 3 沿其和 x 轴的交点顺时针旋转 75 度的操作，旋转有一个持续时间为 3 秒的动画效果。

CodeBuddy 把这个需求拆解成一个个粒度更小的子任务：

1. 添加按钮到 HTML 界面：用户需要在页面上添加一个按钮，用于触发动画。这可以通过在现有的 HTML 结构中插入一个按钮元素，并为其添加事件监听器。
2. 动画逻辑的实现：现有的旋转函数是直接绘制旋转后的图像，现在需要将其改为逐步旋转，形成动画效果。这需要使用 requestAnimationFrame 或者 setInterval 来分步更新旋转角度，并在每一帧重新绘制。
3. 修改现有的绘制函数：目前实现的 drawRotatedFunction 函数接受一个固定的旋转角度（75度），需要修改为接受动态变化的角度，以便在动画中逐步增加角度，直到达到 75 度。
4. 动画时间控制：用户要求 3 秒的动画效果，因此需要计算每一帧的旋转增量，确保在3秒内完成75度的旋转。换言之，假设每秒60帧，总帧数为180帧，每帧旋转75/180 ≈ 0.4167度。
5. 防止重复触发：在动画进行中，应该禁用按钮，防止用户多次点击导致动画混乱。
6. 重置功能：可能还需要一个重置按钮，或者确保动画结束后可以重新开始。

虽然笔者从 2013 年通过 SAP UI5 应用开发，入了前端开发的坑，2020年开始从事 Angular 全职开发至今，类似这种程度的需求我也能熟练拆解，但是 CodeBuddy 这种 AI 工具能在一两秒中内完成拆解，这种效率完全碾压我的存在。

最后 CodeBuddy 实现的代码质量仍然非常高，一个标点符号都不用修改就能直接运行，而且效果完美:

这也比笔者强多了。话说在 AI 工具普及之前，笔者手写代码时，实现需求很少有一次成功的案例，一般都是写了改，改了写。在 AI 工具如雨后春笋涌现之后，笔者已经回想不起上一次纯手工搓代码是啥时候了。

看看 CodeBuddy 生成的代码，将「执行旋转动画」按钮的事件注册，以及防重复点击的保护措施放到一处实现了。

然后用 requestAnimationFrame 驱动一个自行实现的 animate 函数，来实现直线慢慢旋转的动画效果。

当开发者调用 requestAnimationFrame 时，浏览器会将 animate 这个自开发函数，排入下一个重绘周期。在一次典型的帧循环内，浏览器依次完成 JavaScript 执行 → 样式计算 → 布局 → 分层 → 绘制 → 合成等阶段。

而 requestAnimationFrame 被安排在样式计算→布局之前，既保证了 DOM 更新能纳入当前帧，又杜绝了多余的无效计算。

想象你是一个鼓手：在交响乐演奏里，只有指挥棒落下前的最后一瞬敲下去，鼓声才能和整支乐队契合。requestAnimationFrame 就是浏览器渲染的那根指挥棒。

自开发 animate 函数里，调用 calculateRotatedEquation，根据旋转矩阵，计算当前这一帧里直线上每个点旋转到当前位置的坐标值，然后重绘直线。

如果孩子觉得上述这些知识点理解起来有困难，可以直接求助 CodeBuddy：

用中学生能够理解的语言，解释这段代码的语法和含义：

CodeBuddy 耐心的回复：

总之，笔者试用 CodeBuddy 下来，觉得它的安装和使用较之 Trae 和 Cursor 更低，甚至可以说几乎没有门槛可言。在有心的家长和内驱力强的孩子们手中，CodeBuddy 会成为一款学习和编程的利器。