Update static/script.js

static/script.js

@@ -1,6 +1,6 @@
-
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
+
 ctx.fillStyle = "black";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 ctx.strokeStyle = "white";
@@ -9,17 +9,46 @@ ctx.lineCap = "round";
 
 let drawing = false;
 
-canvas.onmousedown = () => drawing = true;
-canvas.onmouseup = () => drawing = false;
-canvas.onmousemove = (e) => {
+// 滑鼠事件
+canvas.addEventListener("mousedown", (e) => {
+    drawing = true;
+    draw(e.clientX, e.clientY);
+});
+canvas.addEventListener("mouseup", () => {
+    drawing = false;
+    ctx.beginPath();
+});
+canvas.addEventListener("mousemove", (e) => {
+    if (drawing) draw(e.clientX, e.clientY);
+});
+
+// 手機觸控事件
+canvas.addEventListener("touchstart", (e) => {
+    e.preventDefault();
+    drawing = true;
+    const touch = e.touches[0];
+    draw(touch.clientX, touch.clientY);
+});
+canvas.addEventListener("touchmove", (e) => {
+    e.preventDefault();
     if (drawing) {
-        const rect = canvas.getBoundingClientRect();
-        ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
+        const touch = e.touches[0];
+        draw(touch.clientX, touch.clientY);
     }
-};
+});
+canvas.addEventListener("touchend", () => {
+    drawing = false;
+    ctx.beginPath();
+});
+
+// 共用繪圖函式
+function draw(x, y) {
+    const rect = canvas.getBoundingClientRect();
+    ctx.lineTo(x - rect.left, y - rect.top);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(x - rect.left, y - rect.top);
+}
 
 function clearCanvas() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -37,8 +66,7 @@ function submit() {
     })
     .then(res => res.json())
     .then(data => {
-    const text = `辨識結果：${data.label}\n信心值：${(data.confidence * 100).toFixed(2)}%`;
-    document.getElementById("result").innerText = text;
-});
-
+        const text = `辨識結果：${data.label}\n信心值：${(data.confidence * 100).toFixed(2)}%`;
+        document.getElementById("result").innerText = text;
+    });
 }