【原创】JavaScript canvas画表格+画文字(或画图形)，出现文字和线条模糊的问题

我一开始直接使用canvas来画表格，是根据正常的设计稿来的

但是画出来之后出现了图像模糊的问题

这是模糊的效果图

解决：

查阅资料之后，发现是因为 canvas 不是矢量图，而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该 canvas 在 Retina 屏幕下相当于占据了2倍的空间，相当于图片被放大了一倍，因此绘制出来的图片文字等会变模糊。

因此，要做 Retina 屏适配，关键是知道当前屏幕的设备像素比，然后将 canvas 放大到该设备像素比来绘制，然后将 canvas 压缩到一倍来展示。

我在说的通俗一点，就是我们平时手机真实的像素是375px，但是我们写的时候，是按750px的设计稿来写的， 就比如说，在手机展示一个10像素的div，我们写的时候就要写20px

所有我加了以下代码来解决问题

附上代码

let dpr = window.devicePixelRatio; // 假设dpr为2
    // 根据dpr，扩大canvas画布的像素，使1个canvas像素和1个物理像素相等
    canvas.style.width = textPx * 6.6 + 'px';
    canvas.style.height = rectH * (arr.length + 1) + 'px';

    canvas.width = textPx * 6.6 * dpr;
    canvas.height = rectH * (arr.length + 1) * dpr;
    // 由于画布扩大，canvas的坐标系也跟着扩大，如果按照原先的坐标系绘图内容会缩小
    // 所以需要将绘制比例放大
    ctx.scale(dpr, dpr);

就解决了，这是最终的效果图

这就解决了，闲聊一下，为什么要用canvas来画表格不用 table，是因为我要把table转换成图片，然后给用户下载

分享一些 将canvas转换成图片的方法