解决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);
相关推荐
笔尖的记忆5 分钟前
浏览器的观察者
前端·javascript
高热度网5 分钟前
初始化electron项目运行后报错 electron uninstall 解决方法
前端·javascript
我的写法有点潮7 分钟前
竟然被element-plus背刺了
前端·javascript·vue.js
Damon小智31 分钟前
从零开始XR开发:Three.js实现交互式3D积木搭建器
javascript·3d·xr
掘金安东尼1 小时前
前端周刊434期(2025年9月29日–10月5日)
前端·javascript·面试
掘金安东尼1 小时前
前端周刊433期(2025年9月22日–9月28日)
前端·javascript·github
井柏然1 小时前
为什么打 npm 包时要将 Vue/React 进行 external 处理?
javascript·vite·前端工程化
江城开朗的豌豆1 小时前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序
江城开朗的豌豆1 小时前
小程序生命周期漫游指南:从诞生到落幕的完整旅程
前端·javascript·微信小程序
江城开朗的豌豆2 小时前
跨平台开发实战:我的小程序双端(iOS、安卓)开发指南
前端·javascript·微信小程序