开发者用 HTML ismap 在 GitHub 个人主页复刻 r/place

aidenybai · x · 2026-11-08

开发者 @notcnrad 在自己的 GitHub 个人主页上复刻了 Reddit 的协作画布 r/place：任何人点击图片上的方格即可翻转像素，所有访客共享同一块画布。

实现原理出人意料地简单：利用 HTML 图片的 ismap 服务端图像映射属性——点击带 ismap 的图片时，浏览器会自动把点击坐标以 ?x,y 的形式发送到链接指向的服务器（此处为 Cloudflare Worker），服务端记录坐标并重新渲染 SVG 画布。配合 <picture> 的 prefers-color-scheme 还能自适应深浅色主题。