fix: 修复 Canvas 在高分屏（DPI>1）上的错位与模糊

问题根因：fitCanvas/fitSquare 把 canvas 内部尺寸乘了 devicePixelRatio，
但绘制代码仍用 CSS 像素坐标、且未对 context 做 setTransform，
导致在 Retina / Windows 缩放 / 手机屏上画面缩在左上角、其余错乱。

修复：
1. lab.js / arcade.js 的 canvas 尺寸统一改为「直接等于 CSS 像素」，
   不再乘 devicePixelRatio，绘制坐标与画布像素严格一致
2. 清理 lab.js 生命游戏 draw() 中残留的无用 dpr 变量
3. lab.js 切到「双摆 / 傅里叶 / 曼德博」tab 时重新测量画布尺寸，
   避免面板从 display:none 变为可见后仍用旧的 0 宽度

影响范围：实验室（4 个实验）、游戏厅（贪吃蛇/俄罗斯方块）全部适配高分屏。

Author: tyuecode

assets/js/arcade.js

@@ -33,13 +33,13 @@
 
   /* ==================== 工具 ==================== */
   function fitSquare(canvas, w, h) {
-    var dpr = window.devicePixelRatio || 1;
     var width = w, height = h || w;
-    canvas.width = width * dpr;
-    canvas.height = height * dpr;
+    // 用 CSS 像素作为画布内部尺寸（不乘 devicePixelRatio），避免高分屏错位
+    canvas.width = width;
+    canvas.height = height;
     canvas.style.width = width + 'px';
     canvas.style.height = height + 'px';
-    return { w: width, h: height, dpr: dpr };
+    return { w: width, h: height };
   }
 
   function store(key, val) {

assets/js/lab.js

@@ -28,7 +28,9 @@
   tabs.forEach(function (t) {
     t.addEventListener('click', function () {
       activate(t.getAttribute('data-lab'));
+      // 面板从 display:none 变为可见后，重新测量画布尺寸（之前测得 0）
       if (active === 'mandel') { mandel.render(); }
+      if (active === 'pendulum') { pendulum.relayout && pendulum.relayout(); }
       if (active === 'fourier') { fourier.render(); }
     });
   });
@@ -37,12 +39,13 @@
   function fitCanvas(canvas) {
     var rect = canvas.parentNode.getBoundingClientRect();
     var w = Math.max(280, Math.floor(rect.width));
-    var dpr = window.devicePixelRatio || 1;
-    canvas.width = w * dpr;
-    canvas.height = w * dpr;
+    // 用 CSS 像素作为画布内部尺寸（不乘 devicePixelRatio），
+    // 避免高分屏上绘制坐标与画布像素错位。轻微锐度损失可接受，换取绝对正确。
+    canvas.width = w;
+    canvas.height = w;
     canvas.style.width = w + 'px';
     canvas.style.height = w + 'px';
-    return { w: w, h: w, dpr: dpr };
+    return { w: w, h: w };
   }
 
   /* ==================== 1. 生命游戏 ==================== */
@@ -98,7 +101,6 @@
     function draw() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.fillStyle = 'rgba(0,0,0,0)';
-      var dpr = window.devicePixelRatio || 1;
       var cellW = canvas.width / COLS;
       var cellH = canvas.height / ROWS;
       ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--link').trim() || '#267cb9';
@@ -199,7 +201,7 @@
 
     function render() {
       var d = fitCanvas(canvas);
-      var w = d.w, h = d.h, dpr = d.dpr;
+      var w = d.w, h = d.h;
       var img = ctx.createImageData(w, h);
       var data = img.data;
 
@@ -389,6 +391,10 @@
         last = 0;
         raf = requestAnimationFrame(loop);
       },
+      relayout: function () {
+        resize();
+        draw();
+      },
       reset: function () {
         a1 = Math.PI * 0.75; a2 = Math.PI * 0.75;
         v1 = 0; v2 = 0;