解决canvas绘图模糊问题

canvas 绘制的是物理像素就是屏幕的分辨率

物理像素(DP)

设备独立像素(DIP)

设备像素比(DPR)

DPR = DP / DIP

html 复制代码
<canvas width="600" height="300" style="width: 300px; height: 150px"></canvas>

style中的width和height是canvas元素在界面上占据的宽高 即 设备独立像素(DIP)

attribute 中的 width 和 height 则代表 Canvas 实际像素的宽高(物理像素(DP))

DPR 越大越模糊

解决绘制模糊

原理: 让 Canvas 像素和屏幕物理像素一一对应

js 复制代码
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio; // 假设 dpr 为 2
// 获取 css 的宽高
const {width: cssWidth, height: cssHeight} = canvas.getBoundingClientRect();
// 根据 dpr,扩大 canvas 画布的像素,使 1 个 canvas 像素和 1 个物理像素相等
canvas.width = dpr * cssWidth;
canvas.height = dpr * cssHeight;
// 由于画布扩大,canvas 的坐标系也跟着扩大,如果按照原先的坐标系绘图内容会缩小,所以需要将绘制比例放大
ctx.scale(dpr,dpr);
相关推荐
程序猿阿伟1 天前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
尘觉1 天前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
chxii1 天前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够1 天前
Vue 自适应高度表格
javascript·vue.js·elementui
咖啡の猫1 天前
Vue初始化脚手架
前端·javascript·vue.js
拉不动的猪1 天前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛1 天前
next.js项目部署流程
开发语言·前端·javascript
非凡ghost1 天前
Syncovery Premium(文件同步软件)
前端·javascript·后端
神膘护体小月半1 天前
bug 记录 - 路由守卫 beforeRouteLeave 与 confirm 结合,不生效问题
javascript·vue
岁月宁静1 天前
Vue 3.5 + WangEditor 打造智能笔记编辑器:语音识别功能深度实现
前端·javascript·vue.js