Canvas

清晰度问题解决

有时我们放置一张图片或者绘制canvas时显示效果会很模糊，怎么解决这个问题呢？

保证 原始尺寸 = 样式尺寸 * 缩放倍率 公式成立，图片可以保证清晰

• 原始尺寸： 图片的原始大小
• 样式尺寸： 图片展示时的大小
• 浏览器中获取缩放倍率 window.devicePixelRatio

// 获取浏览器缩放倍率
const devicePixelRatio = window.devicePixelRatio

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

// 获取图片原始尺寸
function init() {
  canvas.width = 300 * devicePixelRatio
  canvas.height = 300 * devicePixelRatio
}
init()