CANVAS begin

src/components_base/input/dial.tsx

@@ -27,8 +27,39 @@ export default function Dial() {
     //     ctx.stroke();
     // };
 
+    useEffect(() => {
+        console.log('Page loaded.')
+        Taro.createSelectorQuery()
+          .select("#circleCanvas")
+          .fields({ node: true, size: true })
+          .exec(res => {
+            console.log('Page loaded2.')
+            if (res[0] && res[0].width) {
+                console.log('Page loaded3.')
+              const canvas = res[0].node;
+              const ctx = canvas.getContext("2d");
+              // Canvas 画布的实际绘制宽高
+              const width = res[0].width;
+              const height = res[0].height;
+              // 初始化画布大小
+              const dpr = Taro.getSystemInfoSync().pixelRatio;
+              canvas.width = width * dpr;
+              canvas.height = height * dpr;
+              const w = width * dpr;
+              const h = height * dpr;
+              // 绘制内圆
+              ctx.lineWidth = 13 * dpr;
+              ctx.strokeStyle = "rgba(90, 216, 213, 0.5)";
+              ctx.beginPath();
+              ctx.arc(w / 2, h / 2, w / 2 - 20 * dpr, 0, Math.PI * 2, false); // 绘制
+              ctx.stroke();
+            }
+          });
+      });
+
     return (
         <View>
+            <Text>123</Text>
             <Canvas ref={canvasRef}
                 style={{ width: '200px', height: '200px' }}
                 canvasId="circleCanvas"></Canvas>