canvas适配（图片、文字在移动端显示模糊问题）

canvas图片、文字在移动端显示模糊问题

因为 canvas 不是矢量图，而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该 canvas 在 Retina 屏幕下相当于占据了2倍的空间，相当于图片被放大了一倍，因此绘制出来的图片文字等会变模糊。因此，要做 Retina 屏适配，关键是知道当前屏幕的设备像素比，然后将 canvas 放大到该设备像素比来绘制，然后将 canvas 压缩到一倍来展示。

 

const canvas = document.getElementById('canvasBox')
const dpr = window.devicePixelRatio; // 假设dpr为2
const ctx = canvas.getContext('2d')

// 获取css的宽高
const { width: cssWidth, height: cssHeight } = canvas.getBoundingClientRect();
// 根据dpr，扩大canvas画布的像素，使1个canvas像素和1个物理像素相等
canvas.style.width = `${cssWidth}px`;
canvas.style.height = `${cssHeight}px`;

注意： canvas.style.width 和 canvas.style.height  有些博主是直接取canvas.width 和canvas.height, 但是这样会出现高度宽度比例失衡问题；不知道是不是还有其他配置，暂且不谈，会的小伙伴可以分享一下 

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