Welcome!

之前一直使用公司发的 1080P 瞎眼屏，实在是受不了，自费买了红米的 a27u Type-C 版。完美，它简直就是 MacBook 的绝配。

在查看显示器分辨率时，我发现自动设置的是「1920x1080（默认）」，当手动调整至「3840x2160」之后，所有 UI 都变得非常小，文字反而小到没法看了。

这是因为设备的 devicePixelRatio，以下简称 dpr。

Mac 的屏幕自称「视网膜显示器」，在网页缩放比例为 100% 的情况下，它的 dpr 值是 2，表示它在单个方向上使用 2 个物理像素点渲染 1 个网页 css 像素。

而其他普通显示器的 dpr 通常为 1。

使用「1920x1080（默认）」，并不能显示出更多的内容，但是肉眼看会非常清晰。

说回正题。

正因为我使用了这台与 MacBook 屏幕表现一致（指 dpr 值都为 2）的显示器，所以在开发一个新的需求时，没有发现 dpr 发生变化时 Canvas 变模糊的问题。

当把一个网页从低倍率（dpr为 1）显示器拖动到高倍率（dpr 为 2）的显示器上时，假如上面的 Canvas 绘制逻辑未做适配，没有重绘，则会发现上面的文字、图片都会变模糊。

基于 Canvas 的富文本编辑器通常会设计一套自己的缩放系统，它不仅要考虑自身的缩放功能、设备的 dpr 变化，还要考虑网页浏览器的缩放功能。这里后续我会单独写篇文章介绍如何设计。

关于这个 bug，我通过媒体查询实现了对 dpr 变化的监听逻辑，dpr 变化时，对整个 Canvas 的缩放比例进行一次校正和重绘。所有文字绘制时，字体大小的计算应该包含一个当前 dpr 的比例系数。

大三的时候上过一门面向对象的课程，期末要做个小项目，要尽可能使用面向对象的思想，不限制编程语言。

当时的我正在为即将到来的秋招做准备，便借此机会做了一个简单的 Canvas 绘图工具，可以添加一些基础形状（矩形、菱形、圆形、椭圆、三角形等）、文本框、画笔工具，工具栏 UI 照着 Figma 做的。

当时需要实现点击选中元素功能，我是通过遍历所有元素，计算点击位置是否在元素的区域内来实现的。如果有多个元素重叠，就比较头疼，需要再额外处理一下层级。

时隔 4 年，我又一次接触这类 Canvas 应用，看到了其他人对这个问题的一种非常完美的解决思路：

原始 Canvas 称为 c1，新增一个与其完全一致的 c2，每个元素在触发 draw 方法时，不仅在 c1 上进行绘制，还要在 c2 上绘制自己的包络区域，用一种随机的 rgb 值作为颜色值。并存储这样的（元素, color）键值对。

当触发点击时，先获取点击坐标在 c2 上的色值，再通过色值直接拿到对应的元素。这种做法也可以很好地处理多个元素重叠的层级问题。

非常妙。

这种做法叫做「像素标记法」。