记一次高分屏下canvas模糊问题


Posted in HTML / CSS onFebruary 17, 2020

前言

最近在做项目的时候发现,在公司电脑上没问题,在自己电脑上确有问题。做的是canvas的项目,在自己电脑上运行的时候,发现,会出现点击选不中的问题还有,canvas刷新会有残影问题。首先可以确定,这两个问题都是canvas元素边界有问题,但是从代码上来看是没问题的,因此我就猜测是否和屏幕有关,毕竟canvas某些问题确实和屏幕有关甚至和硬件显卡有关。

devicePixelRatio属性

果然找出一个属性不同: devicePixelRatio;
然后仔细研究了下这个属性的含义,mdn上解释如下:

此属性返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例:即一个CSS像素的大小相对于一个物理像素的大小的比值。

公司的台式机的devicePixelRatio为1,而我自己的电脑为1.25;因为我的电脑是高清屏的,那么什么是高清屏呢?
高清显示屏原理如下:

  1. 一种具备超高像素密度的液晶屏
  2. 同样大小的屏幕上显示的像素点由1个变为多个

那么我们就能知道,高清屏上一个像素点变成devicePixelRatio个像素点,因此canvas画布也会收到影响,同样的图片,在高清屏上会变大,但是canvas实际尺寸没有变大,因为图片会缩放,导致模糊。

canvas宽高与css宽高

那么如何解决canvas高分屏问题呢?既然高分屏下canvas的像素点会变多,导致画布缩放,那么我们能不能通过某种方法把canvas缩放回去呢?答案是可以的。
我们首先认识一下canvas的像素,我们先绘制一段文字

<canvas id="canvas1" width="300" height="150"></canvas>
....


ctx1.beginPath();
ctx1.font = '20px arial';
ctx1.fillText('Html5 canvas', 50, 50);

这样我们就得到如下:

记一次高分屏下canvas模糊问题

我们在创建一个画布,这次我们通过css设置画布的宽高:

<canvas id="canvas2" style="width: 200px; height: 200px"></canvas>
.....



ctx2.beginPath();
ctx2.font = '20px arial';
ctx2.fillText('Html5 canvas', 50, 50);

这次我们得到如下效果:

记一次高分屏下canvas模糊问题

我们可以很明显看到画布上的文字有明显的缩放,这是为什么呢?我们可以这么理解: canvas是绘制图片的,我们使用canvas绘制完图片后,首先生成一张根据canvas的宽高的图片,然后通过dom树由css渲染出来,因此canvas的宽高是图片的实际宽高,css的宽高是实际渲染出来的尺寸。那么我们回过头来理解devicePixelRatio,这个属性返回的是设备的物理像素分辨率与CSS像素分辨率的比值,我们的canvas绘制出来后图片因为高清屏设备的影响,导致图片变大,然而我们在浏览器的渲染窗口并没有变大,因此图片会挤压缩放使得canvas画布会变得模糊,尽然高分屏的像素点变多了,导致图片变大,那么我们可以通过设置canvas的宽高设置devicePixelRatio倍的画布大小,然后设置canvas缩放比例为devicePixelRatio倍,保持和canvas等比例放大,然后这样我们相当于在绘制图片的时候就缩放图片变大,然后通过css渲染又会缩放回去,这样canvas的大小就不会失真了。代码如下:

function makeHighRes(canvas) {
    var ctx = canvas.getContext('2d');
    // Get the device pixel ratio, falling back to 1.               
    var dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;

    // Get the size of the canvas in CSS pixels.
    var oldWidth = canvas.width;
    var oldHeight = canvas.height;
    // Give the canvas pixel dimensions of their CSS
    // size * the device pixel ratio.
    canvas.width = Math.round(oldWidth * dpr);
    canvas.height = Math.round(oldHeight * dpr);
    canvas.style.width = oldWidth + 'px';
    canvas.style.height = oldHeight + 'px';
    // Scale all drawing operations by the dpr, so you
    // don't have to worry about the difference.
    ctx.scale(dpr, dpr);
    return ctx;
}

另外:网上有一些解决办法比较古老,使用了backingStoreRatio 这个属性,这个属性已经废弃!
此外我们也可以使用这个库 hidpi-canvas-polyfill,他也是使用的我们这个方法来改变canvas绘制视图的,不过库中还把所有canvas绘制api都缩放了相应的devicePixelRatio倍,考虑很完善。

参考链接
https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/SettingUptheCanvas/SettingUptheCanvas.html
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio
https://www.jianshu.com/p/2cd5143cf9aa

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
利用CSS3的定位页面元素
Aug 29 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 #HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 #HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 #HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 #HTML / CSS
Html5定位终极解决方案
Feb 05 #HTML / CSS
canvas简单连线动画的实现代码
Feb 04 #HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 #HTML / CSS
You might like
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
python中defaultdict的用法详解
2017/06/07 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Python ATM功能实现代码实例
2020/03/19 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
孔庙导游词
2015/02/04 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL