解决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);
相关推荐
JustHappy2 分钟前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构
每天开心2 分钟前
🧙‍♂️闭包应用场景之--防抖和节流
前端·javascript·面试
归于尽10 分钟前
Generator?从 yield 卡壳,到终于搞懂协程那点事
前端·javascript
FogLetter10 分钟前
React组件开发进阶:本地存储与自定义Hooks的艺术
前端·javascript·react.js
GISer_Jing19 分钟前
前端开发—全栈开发
前端·javascript
DoraBigHead27 分钟前
小Dora 的 JavaScript 修炼日记 · Day 1:变量三兄弟与作用域迷宫
前端·javascript·面试
Trust yourself24341 分钟前
easyui碰到想要去除顶部栏按钮边框
前端·javascript·easyui
一洽客服系统1 小时前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead1 小时前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
琹箐2 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript