---
nav:
  title: 前端
  path: /fea
group:
  title: 💊 canvas
  order: 4
---

## 文字

```jsx
import React, { useRef, useEffect } from 'react';

export default () => {
    const canvasRef = useRef()
    const canvasRef2 = useRef()
    const canvasRef3 = useRef()

    // 填充文本
    function demo1() {
        // 声明DOM
        let canvas = canvasRef.current
        let ctx = canvas.getContext('2d')

        ctx.shadowOffsetY = 8
        ctx.shadowOffsetX = 8
        ctx.shadowBlur = 3
        ctx.shadowColor = '#ccc'

        ctx.font = '40px serif'
        ctx.fillText('1. 你是个智障!', 50, 50)
    }

    function demo2() {
        let canvas = canvasRef2.current
        let ctx = canvas.getContext('2d')

        ctx.font = '48px serif'
        ctx.strokeText('2. hello world', 10, 50)
    }

    function demo3() {
        let canvas = canvasRef3.current
        let ctx = canvas.getContext('2d')

        ctx.font = '40px serif'
        ctx.textBaseline = 'top'
        ctx.textAlign = 'start'
        ctx.strokeText('hello world', 0, 100)
    }

    useEffect(() => {
        demo1()
        demo2()
        demo3()
    }, [])

    return (
        <div>
            <canvas ref={canvasRef} width="500" height="200" />
            <canvas ref={canvasRef2} width="500" height="200" />
            <canvas ref={canvasRef3} width="500" height="200" />
        </div>
    )
}
```

```ts
window.onload = function () {
    demo1()
    demo2()
    demo3()
}


```