如何解决canvas生成图片显示不清晰问题？

原因

canvas绘制的图形是位图，即栅格图像或点阵图像，当将它渲染到高清屏时，会被放大，每个像素点会用devicePixelRatio的平方个物理像素点来渲染，因此图片会变得模糊。

解决方法：

放大devicePixelRatio倍canvas的宽高，然后再用css缩小回到你想要的理想像素

function createHDCanvas (w = 300, h = 150) {var ratio = window.devicePixelRatio || 1;var canvas = document.createElement('canvas');canvas.width = w * ratio; // 实际渲染像素canvas.height = h * ratio; // 实际渲染像素canvas.style.width = `${w}px`; // 控制显示大小canvas.style.height = `${h}px`; // 控制显示大小// setTransform() 允许您缩放、旋转、移动并倾斜当前的环境canvas.getContext('2d').setTransform(ratio, 0, 0, ratio, 0, 0);return canvas;}