关于设备像素比

合集 - bjjc奇奇怪怪bug(35)

1.uniapp微信小程序uni.request捕获500异常2024-04-16 2.uniapp兼容问题2024-04-17 3.推荐两个好玩的轻提示2024-04-18 4.不够完美但也很能打的2024-04-18 5.uniapp实现刷新页面保留参数页面不报错的情况2024-04-19 6.关于ESLint: Delete `␍`(prettier/prettier) 错误解决方案（3种）2024-04-24 7.loading2024-04-26

8.关于设备像素比2024-04-29

9.js前端去除HTML标签返回纯字符串正则/<[^>]*>/g2024-05-06 10.Js中valueOf和toString区别和使用2024-05-07 11.vscode关于json文件添加注释报错处理2024-05-08 12.使用js有效括号匹配封装函数2024-05-11 13.单项数据流和双向数据绑定的原理，区别2024-05-11 14.CSRF（跨站请求伪造）原理：2024-05-11 15.记录一下现网微信小程序版本ios手机极个别手机关于登录api（别的没试过）不调用的问题，其他的ios可以正常唯独极个别的ios不可以2024-05-15 16.uniapp实现多行文本溢出超过指定行数展开收起2024-05-16 17.uniapp开发抖音小程序跳转2024-05-17 18.css滚动吸附2024-05-19 19.promise(A).catch(f1).then(f2),f1执行后f2回执行吗，为什么2024-05-20 20.国际化怎么做，中文一个字，阿拉伯语很长一串，怎么实现样式的一致2024-05-20 21.页面切换保存怎么实现数据不丢失且记忆滚动条位置，常规的方案会闪一下，不如原生性能，怎么解决2024-05-20 22.nuxtjs锁函数封装2024-05-21 23.css样式让元素得宽度由内容撑开2024-05-22 24.watch vs. watchEffect2024-05-28 25.HEIC2024-05-28 26.Intersection Observer API 是浏览器原生提供的，用于异步检测目标元素与视口或父元素是否产生交叉。它的优势在于提高性能和简化代码实现。2024-05-29 27.backdrop-filter（纯CSS实现丝滑边框线条动画）2024-05-30 28.js中try中定义的数据catch无法访问2024-06-06 29.自动化脚本同步单个平台所有小程序（本质跨平台uniapp但是业务紧急，按需使用）2024-06-18 30.前端资源提示符2024-08-29 31.微信小程序授权弹框2024-09-27 32.关于高度从0到auto的过渡效果2024-11-18 33.split使用注意点2024-11-25 34.js之连续赋值2024-12-18 35.border和outline的区别2024-12-21

因为高dpi会把原本低dpi的图片或者canvas拉伸导致模糊，所以在定义的时候我们让画布和画布的内容（因为canvas和内容是两个东西）都放大，这样保证高清，个人理解，如有更好的想法可及时更改
1.画布尺寸调整：首先，我们需要根据设备的DPI或像素比调整Canvas的物理尺寸。这意味着如果设备的DPI较高，我们会按比例增加Canvas的实际像素尺寸，而不改变其逻辑尺寸。这样，Canvas就能匹配更多物理像素来呈现内容，避免拉伸。

2.内容缩放：单纯增大Canvas尺寸会导致绘图内容按默认大小绘制时显得过小。因此，我们会在Canvas的绘图上下文中设置一个缩放因子（通常是DPR），使得所有绘制操作（如图像、形状、文本等）在绘制前都按此因子缩放。这样，内容会被放大到适合高DPI屏幕的大小，同时保持其原始的清晰度和比例，不会显得模糊。

通过这两个步骤，即使是在高分辨率的屏幕上，用户也能看到清晰、适配良好的图像和图形内容。这确保了视觉体验的一致性和高质量，无论用户的设备是标准DPI还是高DPI。
createHiDPICanvas(width, height) {
let dpr = uni.getSystemInfoSync().devicePixelRatio;
let canvas = uni.createCanvas();
canvas.width = width * dpr;
canvas.height = height * dpr;
canvas.getContext('2d').scale(dpr, dpr);
return canvas;
}