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

## 颜色

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

export default () => {
    const canvasRef = useRef()
    const canvasRef2 = useRef()
    const canvasRef3 = useRef()
    const canvasRef4 = useRef()
    const canvasRef5 = useRef()
    const canvasRef6 = useRef()
    const canvasRef7 = useRef()
    const canvasRef8 = useRef()
    const canvasRef9 = useRef()
    const canvasRef10 = useRef()
    const canvasRef11 = useRef()
    const canvasRef12 = useRef()

    function demo1() {
        let canvas = canvasRef.current
        let ctx = canvas.getContext('2d')

        for (let i = 0; i < 6; i++) {
            for (let j = 0; j < 6; j++) {
                ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`
                ctx.fillRect(j * 25, i * 25, 25, 25)
            }
        }
    }

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

        for (let i = 0; i < 6; i++) {
            for (let j = 0; j < 6; j++) {
                ctx.strokeStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`
                ctx.beginPath()
                ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true)
                ctx.stroke()
            }
        }
    }

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

        ctx.fillStyle = '#fd0'
        ctx.fillRect(0, 0, 75,75)
        ctx.fillStyle = '#6c0'
        ctx.fillRect(75, 0, 75, 75)
        ctx.fillStyle = '#09f'
        ctx.fillRect(0, 75, 75, 75)
        ctx.fillStyle = '#f30'
        ctx.fillRect(75, 75, 75, 75)

        ctx.fillStyle = '#fff'
        ctx.globalAlpha = 0.2

        for (let i = 0; i < 6; i++) {
            ctx.beginPath()
            ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true)
            ctx.fill()
        }
    }

    function demo4() {
        let canvas = canvasRef4.current
        let ctx = canvas.getContext('2d')

        ctx.fillStyle = 'rgb(255, 221, 0)'
        ctx.fillRect(0, 0, 200, 50)
        ctx.fillStyle = 'rgb(102, 204, 0)'
        ctx.fillRect(0, 50, 200, 50)
        ctx.fillStyle = 'rgb(0, 153, 255)'
        ctx.fillRect(0, 100, 200, 50)
        ctx.fillStyle = 'rgb(255, 51, 0)'
        ctx.fillRect(0, 150, 200, 50)

        for (let i = 0; i < 10; i++) {
            ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`
            for (let j = 0; j < 4; j++) {
                ctx.fillRect(10 + 18 * i, 5 + j * 50, 18, 40)
            }
        }
    }

    function demo5() {
        let canvas = canvasRef5.current
        let ctx = canvas.getContext('2d')

        for (let i = 0; i < 10; i++) {
            ctx.lineWidth = 1 + i
            ctx.beginPath()
            ctx.moveTo(5.5 + i * 14, 5.5)
            ctx.lineTo(5.5 + i * 14, 140.5)
            ctx.stroke()
        }
    }

    function demo6() {
        let canvas = canvasRef6.current
        let ctx = canvas.getContext('2d')
        let lineCap = ['butt', 'round', 'square']

        ctx.strokeStyle = '#09f'
        ctx.beginPath()
        ctx.moveTo(10, 20)
        ctx.lineTo(140, 20)
        ctx.moveTo(10, 130)
        ctx.lineTo(140, 130)
        ctx.stroke()

        ctx.strokeStyle = 'black'
        for (let i = 0; i < lineCap.length; i++) {
            ctx.lineWidth = 15
            ctx.lineCap = lineCap[i]
            ctx.beginPath()
            ctx.moveTo(25 + i * 50, 20)
            ctx.lineTo(25 + i * 50, 130)
            ctx.stroke()
        }
    }

    /**
     *  round 圆角线段
     *  bevel 不让线段超过最大
     */
    function demo7() {
        let canvas = canvasRef7.current
        let ctx = canvas.getContext('2d')
        let lineJoin = ['round', 'bevel', 'miter']

        ctx.lineWidth = 10
        for (let i = 0; i < lineJoin.length; i++) {
            ctx.lineJoin = lineJoin[i]
            ctx.beginPath()
            ctx.moveTo(-5, 5 + i * 40)
            ctx.lineTo(35, 45 + i * 40)
            ctx.lineTo(75, 5 + i * 40)
            ctx.lineTo(115, 45 + i * 40)
            ctx.lineTo(155, 5 + i * 40)
            ctx.stroke()
        }
    }

    /**
     *  setLineDash 虚线交替样式
     *  lineDashOffset 偏移量
     */
    function demo8() {
        let canvas = canvasRef8.current
        let ctx = canvas.getContext('2d')
        let offset = 0

        function march() {
            offset++

            if (offset > 16) {
                offset = 0
            }
            _draw()
            setTimeout(march, 50)
        }

        function _draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.lineWidth = 2
            ctx.setLineDash([4, 2])
            ctx.lineDashOffset = -offset
            ctx.strokeRect(10, 10, 100, 100)
        }
        
        march()
    }

    function demo9() {
        let canvas = canvasRef9.current
        let ctx = canvas.getContext('2d')

        let lineargradient = ctx.createLinearGradient(0, 0, 0, 150)
        lineargradient.addColorStop(0, '#00abeb')
        lineargradient.addColorStop(0.5, '#fff')
        lineargradient.addColorStop(0.5, '#26c000')
        lineargradient.addColorStop(1, '#fff')

        let radialgradient = ctx.createLinearGradient(0, 50, 0, 95)
        radialgradient.addColorStop(0.5, '#000')
        radialgradient.addColorStop(1, 'rgba(0, 0, 0, 0')

        ctx.fillStyle = lineargradient
        ctx.strokeStyle = radialgradient

        ctx.fillRect(10, 10, 130, 130)
        ctx.strokeRect(50, 50, 50, 50)
    }

    function demo10() {
        let canvas = canvasRef10.current
        let ctx = canvas.getContext('2d')

        let radgrad = ctx.createRadialGradient(45, 50, 10, 52, 50, 30)
        radgrad.addColorStop(0, '#a7d30c')
        radgrad.addColorStop(0.9, '#019f62')
        radgrad.addColorStop(1, 'rgba(1, 159, 98, 0')

        let radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50)
        radgrad2.addColorStop(0, '#fff')
        radgrad2.addColorStop(0.75, '#ff0188')
        radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)')

        let radgrad3 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90)
        radgrad3.addColorStop(0, '#f4f201')
        radgrad3.addColorStop(0.8, '#00B5E2')
        radgrad3.addColorStop(1, '#00B5E2')

        ctx.fillStyle = radgrad3
        ctx.fillRect(0, 0, 150, 150)
        ctx.fillStyle = radgrad2
        ctx.fillRect(0, 0, 150, 150)
        ctx.fillStyle = radgrad
        ctx.fillRect(0, 0, 150, 150)
    }

    function demo11() {
        let canvas = canvasRef11.current
        let ctx = canvas.getContext('2d')

        // 创建 img，作为图案
        let img = new Image()
        img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'
        
        img.onload = function () {
            let ptrn = ctx.createPattern(img, 'repeat')
            ctx.fillStyle = ptrn
            ctx.fillRect(0, 0, 150, 150)    
        }
    }

    function demo12() {
        let canvas = canvasRef12.current
        let ctx = canvas.getContext('2d')

        ctx.beginPath()
        ctx.fillStyle = '#aaa'
        ctx.arc(50, 50, 30, 0, Math.PI * 2, true)
        ctx.arc(50, 50, 15, 0, Math.PI * 2, true)
        ctx.fill('evenodd')
    }

    useEffect(() => {
        demo1()
        demo2()
        demo3()
        demo4()
        demo5()
        demo6()
        demo7()
        demo8()
        demo9()
        demo10()
        demo11()
        demo12()
    }, [])

    return (
        <div>
            <canvas ref={canvasRef} width="200" height="200" />
            <canvas ref={canvasRef2} width="200" height="200" />
            <canvas ref={canvasRef3} width="200" height="200" />
            <canvas ref={canvasRef4} width="200" height="200" />
            <canvas ref={canvasRef5} width="200" height="200" />
            <canvas ref={canvasRef6} width="200" height="200" />
            <canvas ref={canvasRef7} width="200" height="200" />
            <canvas ref={canvasRef8} width="200" height="200" />
            <canvas ref={canvasRef9} width="200" height="200" />
            <canvas ref={canvasRef10} width="200" height="200" />
            <canvas ref={canvasRef11} width="200" height="200" />
            <canvas ref={canvasRef12} width="200" height="200" />
        </div>
    )
}
```

```js

```