scroll、layout、click ok

main.js

@@ -1,31 +1,87 @@
-console.log("load main.js success!");
 const canvas = document.getElementById("c");
 const ctx = canvas.getContext("2d");
 
-function render() {
+const img = new Image();
-	ctx.clearRect(0, 0, canvas.width, canvas.height);
+img.src = "./images/1.jpg";
+const thumbW = 100;
+const thumbH = 100;
+const gap = 10;
+const columns = Math.floor(canvas.width / (thumbW + gap));
+const count = 100;
+let scrollTop = 0;
+let selectedIndex = -1;
 
-	ctx.fillStyle = "#eee";
+canvas.addEventListener("wheel", (e) => {
-	ctx.fillRect(0, 0, canvas.width, canvas.height);
+  scrollTop += e.deltaY;
+  const rows = Math.ceil(count / columns);
+  const contentHeight = rows * (thumbW + gap);
 
-	ctx.beginPath();
+  let maxScroll = contentHeight - canvas.height;
-	ctx.moveTo(20, 20);
+  if (maxScroll < 0) maxScroll = 0;
-	ctx.lineTo(200, 50);
-	ctx.strokeStyle = 'blue';
-	ctx.lineWidth = 4;
-	ctx.stroke();
 
-	ctx.font = "20px Arial";
+  if (scrollTop < 0) scrollTop = 0;
-	ctx.fillStyle = "black";
+  if (scrollTop > maxScroll) scrollTop = maxScroll + 10;
-	ctx.fillText("Canvas", 20, 100);
 
-	requestAnimationFrame(render);
+  render();
+});
+
+canvas.addEventListener("click", handleClick);
+
+img.onload = () => {
+  render();
+};
+
+function getMousePos(e) {
+  const rect = canvas.getBoundingClientRect();
+  return {
+    x: e.clientX - rect.left,
+    y: e.clientY - rect.top,
+  };
 }
 
-render();
+function handleClick(e) {
+  const pos = getMousePos(e);
+  const mouseX = pos.x;
+  const mouseY = pos.y;
 
-canvas.addEventListener("click", (e) => {
+  for (let i = 0; i < count; i++) {
-	const rect = canvas.getBoundingClientRect();
+    const row = Math.floor(i / columns);
-	const x = e.clientX - rect.left;
+    const col = i % columns;
-	const y = e.clientY - rect.top;
+
-});
+    const x = col * (thumbW + gap);
+    const y = row * (thumbH + gap) - scrollTop;
+
+    if (
+      mouseX >= x &&
+      mouseX <= x + thumbW &&
+      mouseY >= y &&
+      mouseY <= y + thumbH
+    ) {
+      selectedIndex = i;
+      render();
+      return;
+    }
+  }
+}
+
+function render() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  for (let i = 0; i < count; i++) {
+    const totalWidth = columns * (thumbW + gap) - gap;
+    const startX = (canvas.width - totalWidth) / 2;
+    const row = Math.floor(i / columns);
+    const col = i % columns;
+
+    const x = startX + col * (thumbW + gap);
+    const y = row * (thumbH + gap) - scrollTop;
+
+    ctx.drawImage(img, x, y + 10, thumbW, thumbH);
+
+    if (i === selectedIndex) {
+      ctx.strokeStyle = "red";
+      ctx.lineWidth = 4;
+      ctx.strokeRect(x, y + 10, thumbW, thumbH);
+    }
+  }
+}