解决canvas绘制文本模糊问题

canvas绘制文本模糊表现如下：

原因分析： 高清屏上物理像素和设备独立像素不一致导致的

解决方式： 通过屏幕dpr调整canvas大小，在调整后的画布上fillText

let dpr = window.devicePixelRatio; 
let { width: cssWidth, height: cssHeight } = canvas.getBoundingClientRect();
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";

canvas.width = dpr * cssWidth;
canvas.height = dpr * cssHeight;
ctx.scale(dpr, dpr);

最终效果可戳codepen.io/guo723/pen/…

参考

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