原因
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;
}