如何从零起步，独立开发 Web Office 套件中的光标功能？

本文共计798个文字，预计阅读时间需要4分钟。

《从零开始，开发一个Web Office套件》系列博客目录

这是一系列博客，旨在一步步教大家如何开发一个基于HTML Canvas、类似于微软Office的Web Office套件（包括：文档、表格、幻灯片等）。

《从零开始, 开发一个 Web Office 套件》系列博客目录
这是一个系列博客，最终目的是要做一个基于 HTML Canvas 的、类似于微软 Office 的 Web Office 套件（包括：文档、表格、幻灯片……等等）。
对应的Github repo 地址: github.com/zhaokang555/canvas-text-editor

2. 富文本编辑器(MVP) 2.16 光标

我们先来实现一个闪烁的光标，就像下面这样：

2.16.1 绘制静止的光标

首先，创建文件src/core/BlinkingCursor.ts:

然后，在CanvasTextEditor中添加函数createBlinkingCursor，暂时将光标绘制在最后一个字符后面。

最后，修改CanvasTextEditor的构造函数和render函数:

效果：

2.16.2 让光标闪烁起来

首先我们需要确定光标闪烁的频率。这里，我们暂定为一秒（其中亮半秒，隐藏半秒）。

然后，修改BlinkingCursor:

其中：

• duration代表动画一个周期的长度（即波长）；
• phase代表当前时刻动画所处的相位；

同时，在合适的地方调用show函数。