解决canvas高分屏下显示不清晰的问题
2020-03-03 10:03•编程•1253人阅读
最近不经意间用iPad打开了我的博客，一位高糊的血小板朋友进入了我的直播间，突然间意识到这是个Canvas，应该是绘制的时候由于高清屏描绘的像素不一样，本应该是1px渲染的，有的却2px渲染 
那么就直接上代码啦
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var styleW = 280;
var styleH = 280;
var dpr= window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;
if(dpr) {
canvas.width = Math.round(styleW * dpr);
canvas.height = Math.round(styleH * dpr);
canvas.style.width = styleW + 'px';
canvas.style.height = styleH + 'px';
}
复制