HTML5 Canvas图片模糊问题-蒲公英云

HTML5 Canvas图片模糊问题

小鱼儿 2022-10-16 09:39 356阅读 0赞

关于canvas图片模糊问题最好的办法就使用Window.devicePixelRatio

Window 接口的devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。
此值也可以解释为像素大小的比率：一个CSS像素的大小与一个物理像素的大小。
简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。

当处理标准显示器与HiDPI或Retina显示器之间的差异时，这很有用，后者使用更多的屏幕像素绘制相同的对象，从而获得更清晰的图像。

语法：

value = window.devicePixelRatio;

初始化例子：

在 canvas 中修改分辨率

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 设置显示大小（css 像素）。
var size = 200;
canvas.style.width = size + "px";
canvas.style.height = size + "px";
// 设置内存中的实际大小（缩放以考虑额外的像素密度）。
var scale = window.devicePixelRatio; // 在视网膜屏幕上更改为 1 以查看模糊
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);
// 标准化坐标系以使用 css 像素。
ctx.scale(scale, scale);