解决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);
相关推荐
脑袋大大的9 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0118 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
goldenocean3 小时前
React之旅-05 List Key
前端·javascript·react.js
Mintopia5 小时前
像素的进化史诗:计算机图形学与屏幕的千年之恋
前端·javascript·计算机图形学
Mintopia5 小时前
Three.js 中三角形到四边形的顶点变换:一场几何的华丽变身
前端·javascript·three.js