CANVAS begin

src/components_base/input/dial.tsx

@@ -0,0 +1,37 @@
+import { View, Text, Canvas } from '@tarojs/components'
+import Taro, { useDidShow, useReady } from '@tarojs/taro'
+import { useLoad } from '@tarojs/taro'
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function Dial() {
+    const canvasRef = useRef();
+    // const [ctx, setCtx] = useState(null);
+
+    // useEffect(() => {
+    //     if (canvasRef.current) {
+    //         const context = canvasRef.current.getContext('2d');
+    //         setCtx(context);
+    //     }
+    // }, []);
+
+    // useEffect(() => {
+    //     if (ctx) {
+    //         drawCircle();
+    //     }
+    // }, [ctx]);
+
+    // const drawCircle = () => {
+    //     ctx.beginPath();
+    //     ctx.arc(100, 100, 50, 0, 2 * Math.PI);
+    //     ctx.stroke();
+    // };
+
+    return (
+        <View>
+            <Canvas ref={canvasRef}
+                style={{ width: '200px', height: '200px' }}
+                canvasId="circleCanvas"></Canvas>
+        </View>
+    )
+}

src/pages/clock.tsx

@@ -2,6 +2,7 @@ import { View, Text,Button } from '@tarojs/components'
 import Taro, { useLoad } from '@tarojs/taro'
 import { useTranslation } from 'react-i18next'
 import './clock.scss'
+import Dial from '@/components_base/input/dial'
 // import { changeLanguage } from 'i18next'
 
 export default function Index() {
@@ -22,6 +23,7 @@ export default function Index() {
             <Text>{t('languageList.en')}</Text>
             <Button onTap={()=>changeLanguage()}>{t('languageList.switch_language')}</Button>
             <Text>1234</Text>
+            <Dial />
         </View>
     )
 }