用Canvas绘制掘金网首页界面：一次硬核的尝试

在前端开发中，我们习惯了使用HTML和CSS来构建用户界面。但你是否想过Ru果完全抛弃DOM树，使用纯Canvas来绘制一个复杂的现代Web页面会是怎样的体验？

Zui近，我们进行了一次硬核的尝试：基于Skia 和Yoga布局引擎，使用React自定义渲染器从零构建了掘金的首页。这种尝试不仅让我们体验到了“掌控每一个像素”的快感，还让我们深入了解了Canvas的渲染机制和Flexbox布局的强大之处。

canvas 坐标系统中,元素的左上角为坐标原点,向右下延伸坐标轴,所有图形相对于原点绘制,默认1网格单位对应1像素。不同于SVG，canvas只提供了一种基本图形：矩形，不过借助路径我们Ke以绘制想要的任意图形。

为了在Canvas中画出完美的1px分割线，我们采用了绝对定位的<View>元素来模拟。这种方法不仅解决了单边边框的支持问题，还让我们geng好地控制了渲染细节。

要实现这个目标，我们不Neng使用标准的react-dom。我们的底层基础设施包括Skia 和Yoga布局引擎。通过react-canvas，我们Ke以使用Flexbox布局和内联样式来构建复杂的UI界面。

得益于Yoga，我们Ke以像写React Native一样使用Flexbox布局。所有的样式dou是内联的JS对象，而不是CSS类。这种方法不仅简化了我们的代码，还提高了渲染性Neng。

在纯Canvas的世界里没有<div><span>或<img>。一切dou是自定义的节点。我们在Zui外层使用CanvasProvider初始化运行时并加载了思源黑体，以确保中文Neng够正确显示。

import { CanvasProvider, Canvas, View, Text } from "@react-canvas/react-v2";
import localParagraphFontUrl from "../assets/NotoSansSC-Regular.otf?url";
<CanvasProvider initOptions={{ defaultParagraphFontUrl: localParagraphFontUrl }}>
  { => (
    <Canvas
      width={vw}
      height={vh}
      paragraphFontProvider={runtime.paragraphFontProvider}
      defaultParagraphFontFamily={runtime.defaultParagraphFontFamily}
   >
      {/* 页面内容 */}
    </Canvas>
  )}
</CanvasProvider>

在DOM中，我们通常用:hover伪类来处理鼠标悬停状态。在react-canvas中，style属性支持传入一个函数，接收当前的交互状态。这种方法让我们Neng够geng好地控制组件的样式和行为。

<View
  style={ => ({
    padding: ,
    backgroundColor: hovered ? "#fafafa" : "#ffffff", // 悬停时改变背景色
    cursor: "pointer",
  })}
>
  <Text>文章标题</Text>
</View>

通过组合这些基础Neng力，我们成功地还原了掘金首页的复杂布局，包括顶部导航栏、好文推荐官等模块。我们的实现不仅具有极致的渲染控制权，还实现了跨平台的一致性。

使用纯Canvas绘制复杂的Web UI是一次非常有趣的探索。虽然它失去了DOM带来的无障碍性、SEO和原生的文本选中Neng力，但它带来了极致的渲染控制权和跨平台的一致性。我们期待未来Neng够有geng多的项目采用这种技术，实现geng高效、geng灵活的前端开发。

canvas标签使用JavaScript在网页上绘制canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

// 掘金顶部导航栏的布局示例
<View
  style={{
    width: vw,
    height: ,
    backgroundColor: "#ffffff",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: ,
    paddingRight: ,
  }}
>
  {/* Logo 和导航项 */}
</View>

// script.js const canvas =document.getElementById; const ctx = canvas .getContext; let painting = false ; // 是否在绘画 let color = ' #000000 ' ; // 默认颜色 let size = 5 ; // 默认画笔大小 // 开始绘画 function startPosition {    painting = true ;    draw; // 确保在开始.... }