こんにちは!それで、私は使用方法を理解しようとして数日を費やしました<canvas> 反応して.

Canvas lets you output graphics on the screen
You may use it for games like Pong or data visualization

結果として、私は非常に基本的なアプリを使用して、それは私がプロジェクトでそれを必要とする場合のリファレンスとして使用します.簡単にコードを通してください!

あなたが画面上で何を参照してください

基本的にアプリは3つのことをすることになっている

画面上のグラフィックスを出力する

ボックスの動きを定義する

一時停止/ボタンでアニメーションを再開しましょう

あなたがコードで見るもの

ここではsource code . と作業app .
本質的には、アプリケーションの3つの部分があります.

const CanvasPractice = () => {

    // get canvas
    const canvasRef = useRef()

    // set frame counter
    const [counter, setCounter] = useState(0)
    const [shouldStop, setShouldStop] = useState(true)

    // box position and speed
    const [positionX, setPositionX] = useState(165)
    const [positionY, setPositionY] = useState(165)

    const [dx, setDx] = useState(2)
    const [dy, setDy] = useState(1.5)

    const [motionType, setMotionType] = useState('Circle')

    // update the counter
    useLayoutEffect(() => {
        if (!shouldStop) {
            let timerId

            const animate = () => {
                setCounter(c => c + 1)
                timerId = requestAnimationFrame(animate)
            }
            timerId = requestAnimationFrame(animate)
            return () => cancelAnimationFrame(timerId)
        }
    }, [shouldStop])

    // output graphics
    useEffect(() => {

        const canvas = canvasRef.current
        const context = canvas.getContext('2d')

        context.clearRect(0, 0, 350, 350)

        // some code to calculate position 

        context.fillStyle = '#555555'
        context.fillRect(positionX, positionY, 20, 20)

    }, [counter])

    const changeMotionType = () => {
        if (motionType === 'Circle') {
            setMotionType('Bounce')
        } else {
            setMotionType('Circle')
        }
    }

    return (
        <div className='container'>
            <canvas ref={canvasRef} 
                width="350px" height="350px" 
                onClick={changeMotionType} 
            />
            <h3>Frame count: {counter}</h3>
            <p>Motion type is {motionType}</p>
            <button 
                onClick={() => setShouldStop(!shouldStop)}>
                { shouldStop ? 'Start' : 'Stop' }
            </button>
        </div>
    )
}

export default CanvasPractice

1 .エンジン

useLayoutEffect() セクションはエンジンとして機能する.requestAnimationFrame() 関数は、およそ60回、それ自体をリフレッシュして、カウンタ値を増やしました.これは、アプリケーションの主なパルスです.
あなたはカウンターに依存してカウンタをフィードuseEffect() セクションをリフレッシュし、画面上のグラフィックスを更新する原因.

更なる読書

ここではどのように説明する素晴らしい記事ですrequestAnimationFrame() 機能作品
Using requestAnimationFrame with React Hooks
次に、このアプリケーションのuseAffect ()でuselayouteffect ()を好む理由について、スーパー便利な注意点を見つけることができます.
requestAnimationFrame and useEffect vs useLayoutEffect

出力

useeffect ()セクションでキャンバスを初期化します.
現在のフレームのボックス位置を計算するpositionX and positionY 状態.
を使って出力するcontext.fillRect(positionX, positionY, 20, 20) メソッド.

3 .制御

ボタンを一時停止/アニメーションを再開することができます.
それから、箱が動く2つのモードがあります.それは円で実行されたり、ボードの側面からバウンス、それはビデオゲームで行うように.あなたはボード上の任意の場所をクリックしてモードを切り替えることができます.

So

この探査はおもしろいですか.
何か提案があれば、知らせて!

更新

そして、実際のゲームは同じ基盤上に構築されます
poung.ptifur.digital