我使用 React 和 Canvas API 创建了一个很棒的绘画应用程序

我刚刚为Hashnode 圣诞节黑客马拉松提交了这个应用程序，所以我想在这里更详细地讨论它。

我没有机会使用 HTML 画布和Canvas API，所以这次黑客马拉松给了我一个很好的理由去深入研究它。

我还想添加一些独特的元素，让结果更具魔力，所以我添加了动态颜色画笔和动态宽度画笔。事实证明，这个效果确实看起来更加魔幻梦幻。

技术栈

React（使用自定义 React hooks）
画布 API
原生颜色选择器和范围输入
字体真棒图标
Netlify 托管

介绍屏幕

由于我主要从事前端开发，并且特别注重设计和细节，所以我想为这个应用创建一个漂亮的启动画面。我的灵感来自于水彩和颜料套装盒的设计。

我记得我买学校用的绘画套装的时候，盒子上的图案给我留下了深刻的印象。它们展示了一幅美丽的画，并暗示着“你可以用这套画来画出这幅美丽的画”。所以我想用启动画面来模仿这种感觉。

如果您想知道我是如何在标题文本上叠加渐变的，这里有一个代码片段。



  background: linear-gradient(
    90deg,
    hsl(0, 100%, 50%),
    hsl(211, 100%, 50%) 50%,
    hsl(108, 100%, 40%)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

自定义钩子

我使用自定义钩子添加了带有事件监听器和 Canvas API 的绘画功能，该钩子返回切换画笔、设置 Canvas 引用和跟踪活动状态所需的一系列状态和函数。

动态颜色和画笔宽度

这就是魔法发生的地方。在魔法画笔模式下，我会在每次绘制时改变 HSL 颜色的色相值。最终的效果是一个美妙的色彩渐变。我还添加了控制按钮来调整颜色渐变的饱和度和亮度，以提供更多选项和氛围。



ctx.current.strokeStyle = `hsl(${hue.current},${selectedSaturation.current}%,${selectedLightness.current}%)`;
ctx.current.globalCompositeOperation = "source-over";

hue.current++;

if (hue.current >= 360) hue.current = 0;

与魔法画笔模式类似，我还添加了动态宽度模式，可以在最小值和最大值之间上下调整画笔大小值。与魔法画笔模式结合使用，您可以创作出一些令人惊叹的艺术作品和效果。



  const dynamicLineWidth = useCallback(() => {
    if (!ctx || !ctx.current) {
      return;
    }
    if (ctx.current.lineWidth > 90 || ctx.current.lineWidth < 10) {
      direction.current = !direction.current;
    }
    direction.current ? ctx.current.lineWidth++ : ctx.current.lineWidth--;
  }, []);