让 Canvas 表格适配不同设备，告别模糊：S2 高清方案

S2 是一款基于 Canvas 开发的多维可视分析表格，在实际的业务场景开发中，我们发现有 2 种使用场景会导致表格渲染模糊：不同 DPR 的设备之间来回切换、表格本身放大缩小。本文将重点介绍如何解决这些问题，提供一套高清方案，让 S2 表格在任何设备上都能清晰显示。

问题分析

1. 不同 DPR 设备之间来回切换

不同的设备具有不同的设备像素比（DPR），例如，苹果 Retina 显示屏的 DPR 为 2，这意味着在该设备上显示的每个像素实际上由 4 个物理像素组成。当用户在不同 DPR 的设备之间来回切换时，Canvas 绘制的表格可能会出现模糊的情况。

2. 表格本身放大缩小

当用户对表格进行放大缩小操作时，Canvas 绘制的表格也可能会出现模糊的情况。这是因为 Canvas 使用了位图图像，在放大缩小时，位图图像的像素会被拉伸或压缩，从而导致图像变得模糊。

高清方案

为了解决上述问题，我们提出了一套高清方案，该方案主要包括以下几个步骤：

1. 使用 window.devicePixelRatio 获取设备的 DPR

首先，我们需要使用 window.devicePixelRatio 获取设备的 DPR。

const dpr = window.devicePixelRatio;

2. 创建一个与设备 DPR 相同的 Canvas

接下来，我们需要创建一个与设备 DPR 相同的 Canvas。

const canvas = document.createElement('canvas');
canvas.width = width * dpr;
canvas.height = height * dpr;

3. 将 Canvas 的 style 属性的 width 和 height 属性设置为原始尺寸

然后，我们需要将 Canvas 的 style 属性的 width 和 height 属性设置为原始尺寸。

canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

4. 在 Canvas 上绘制表格

最后，我们在 Canvas 上绘制表格。

const context = canvas.getContext('2d');
// 绘制表格

实际效果

通过使用上述高清方案，我们成功解决了不同 DPR 设备之间来回切换和表格本身放大缩小导致的表格模糊问题。在实际应用中，该方案也取得了良好的效果。

总结

本文介绍了 S2 表格在不同设备和不同 DPR 下如何实现高清渲染，解决表格放大模糊问题。我们提出了一套高清方案，该方案简单易用，且效果显著。希望本文能够对大家有所帮助。