liuliangsir · March 9, 2023 09:23 · Jul 28, 2019 · Jul 28, 2019
diff --git a/canvasDraw.jsx b/canvasDraw.jsx
@@ -0,0 +1,56 @@
+import React from "react";
+
+const scaleWidth = 500;
+const scaleHeight = 500;
+
+function draw(canvas, scaleX, scaleY) {
+    const context = canvas.getContext("2d");
+    context.scale(scaleX, scaleY);
+    context.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
+
+    context.beginPath();
+    context.setLineDash([]);
+    context.lineWidth = 2;
+    context.strokeStyle = "red";
+    context.moveTo(0, 100);
+    context.lineTo(scaleWidth, 100);
+    context.moveTo(0, 400);
+    context.lineTo(scaleWidth, 400);
+    context.stroke();
+    context.lineWidth = 1;
+    context.strokeStyle = "blue";
+    context.fillStyle = "blue";
+    context.rect(200, 200, 100, 100);
+    context.fill();
+    context.closePath();
+}
+
+function CanvasDraw() {
+    const [scale, setScale] = React.useState({ x: 1, y: 1 });
+    const canvas = React.useRef(null);
+
+    const calculateScaleX = () => (!canvas.current ? 0 : canvas.current.clientWidth / scaleWidth);
+    const calculateScaleY = () => (!canvas.current ? 0 : canvas.current.clientHeight / scaleHeight);
+
+    const resized = () => {
+        canvas.current.width = canvas.current.clientWidth;
+        canvas.current.height = canvas.current.clientHeight;
+        setScale({ x: calculateScaleX(), y: calculateScaleY() });
+    };
+
+    React.useEffect(() => resized(), []);
+
+    React.useEffect(() => {
+        const currentCanvas = canvas.current;
+        currentCanvas.addEventListener("resize", resized);
+        return () => currentCanvas.removeEventListener("resize", resized);
+    });
+
+    React.useEffect(() => {
+        draw(canvas.current, scale.x, scale.y);
+    }, [scale]);
+
+    return <canvas ref={canvas} style={{ width: "100%", height: "100%" }} />;
+}
+
+export default CanvasDraw;