Canvas 基础 & 在 React 项目中使用

import { CanvasHTMLAttributes, useState } from "react"
import React, { useEffect, useRef, useMemo } from "react"
import cls from "classnames"

// 设备像素比
const getPixelRatio = () => {
  return window.devicePixelRatio || 1
}

interface IProps<T> extends CanvasHTMLAttributes<HTMLCanvasElement> {
  className?: string
  dpr?: number
  width: number
  height: number
  draw: (
    ctx: CanvasRenderingContext2D,
    userConfig: T,
    scale: (num: number) => number
  ) => void
  userConfig: T
}

const CanvasComponents = <T,>({
  draw,
  className,
  style,
  dpr,
  width = 300,
  height = 150,
  userConfig,
  ...canvasAttributes
}: IProps<T>) => {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [ratio, setRatio] = useState(1)

  useEffect(() => {
    // 为了支持 SSR，在当前生命周期才能调用 window 对象获取设备像素比例
    setRatio(dpr || getPixelRatio())
  }, [dpr])

  const [hdWidth, hdHeight] = useMemo(() => {
    return [+width * ratio, +height * ratio]
  }, [width, height, ratio])

  useEffect(() => {
    const canvasDom = canvasRef.current
    const ctx: CanvasRenderingContext2D | null = canvasDom
      ? canvasDom.getContext("2d")
      : null
    if (!canvasDom || !ctx) {
      // canvas unsupported or not find
      return
    }
    if (draw) {
      // 使其在水平和垂直方向上都按照 ratio 缩放。这个操作会影响后续在 Canvas 上绘制的内容，将其缩放为原始尺寸的 ratio 倍。
      ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
      const scale = (num: number) => num * ratio
      draw(ctx, userConfig, scale)
    }
    return () => {
      // 重置 setTransform，以保证矩形的位置大小是正确的
      ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
      ctx.clearRect(0, 0, canvasDom.width, canvasDom.height)
    }
  }, [draw, width, height, ratio, userConfig])

  return (
    <canvas
      ref={canvasRef}
      className={cls("bg-black dark:bg-white", className)}
      style={{ width: `${width}px`, height: `${height}px`, ...style }}
      width={hdWidth}
      height={hdHeight}
      {...canvasAttributes}
    />
  )
}

export default CanvasComponents

<CanvasComponents
  className="mx-1 my-1"
  width={150}
  height={150}
  draw={(ctx, userConfig) => {
    // userConfig.useColor 根据当前页面是 light 还是 dark 模式，自动选择其中一个颜色。
    // 绘制一个矩形的边框
    ctx.strokeStyle = userConfig.useColor(colors.blue[400], colors.blue[700])
    ctx.strokeRect(10, 10, 50, 50)
    // 绘制一个填充的矩形
    ctx.fillStyle = userConfig.useColor(colors.red[600], colors.red[700])
    ctx.fillRect(30, 30, 50, 50)
  }}
  userConfig={userConfig}
/>