HarmonyOS 原生应用开发中的 ArkUI 框架提供了符合 web 标准的 Canvas 绘图接口，我们可以使用 Canvas 绘制各种图形。

这次我们将使用 Canvas 绘制一个颜色选择器，实现更加直观的颜色选择功能。

1. 开始前的准备

打开我们上一节的项目，在图中位置添加一个 Canvas 组件，如下图所示：

这样我们就拥有了一个 360*360 的 Canvas 画布，但目前还不能绘制，我们还需要设置这个画布的绘制上下文。

具体的代码如下：

我们现在具备了可以绘制的能力，接下来我们将新建一个自定义的 class 类用来实现颜色选择器的绘制。

在路径`src/main/ets/components/utils/ColorPicker.ets`新建一个 ColorPicker 类，代码如下：

接下来我们在 Index 类中引入 ColorPicker 类，并在 Canvas 的 onReady 方法中实例化 ColorPicker 类，代码如下：

这样我们就通过自定义的工具类实现了刚才的效果，之后我们就可以专注于 ColorPicker 的绘制逻辑了。

2. 实现颜色选择器

要想实现颜色选择器，首先我们需要一个可以选择颜色的色盘。

我们通常使用的 rgb 颜色模型是 16\*16 的色盘，我们可以通过计算得到每个色块的颜色值，然后绘制到 Canvas 上。

1. 绘制色盘

我们希望通过之前的`ColorPicker`工具类初始化的时候，就将色盘完整绘制到画布中。

修改 ColorPicker 的 init 函数内容如下：

2. 实现颜色选择

我们希望用户可以通过点击色盘选择颜色，我们可以通过监听 Canvas 的点击事件，获取点击的坐标，然后获取点击的颜色。

那么首先要能监听到 Canvas 画布的点击事件，为 Canvas 组件添加如下代码

然后我们需要在 ColorPicker 类中实现 getColor 方法，代码如下：

这样我们就可以通过点击色盘获取到点击的颜色了。

当你获取到上图的日志，说明你已经成功获取到了点击的颜色。这里需要注意的是，在编辑器中的Previewer是无法获取到getImageData的数据的，所以需要在真机上测试。

下一步，我们需要再修改一下代码。让整个流程更合理的实现数据绑定。

3. 实现颜色选择器的数据绑定

我们修改底部按钮的代码如下，让组件具备一个局部变量。

用来确认等待配置的颜色是color1还是color2。

这里需要注意的是`currentColorNumber`变量必须具备`@State`装饰器，这样我们才能在修改这个变量的值的同时，影响按钮的背景颜色方便识别是否选中。

具体代码：

接下来我们需要在点击色盘的时候，将颜色覆盖到第一节文章中svg的颜色。

最终效果如下：

4. 总结

通过本文的学习，我们了解了如何使用 Canvas 绘制图形，实现自由绘制功能。

我们通过绘制色盘，实现了一个颜色选择器，通过点击色盘选择颜色，实现了颜色选择功能。

在实现颜色选择器的过程中，我们还学习了如何监听 Canvas 的点击事件，获取点击的坐标，获取点击的颜色。

最后，我们还实现了颜色选择器的数据绑定，实现了颜色选择器和按钮的数据绑定。

---

全文代码在相关代码仓库的Step4分支中，欢迎大家下载体验。

注：这一节与下一节代码都在Step4分支