canvas绘图问题(记一次高分屏下canvas模糊问题)
canvas绘图问题
记一次高分屏下canvas模糊问题前言
最近在做项目的时候发现,在公司电脑上没问题,在自己电脑上确有问题。做的是canvas的项目,在自己电脑上运行的时候,发现,会出现点击选不中的问题还有,canvas刷新会有残影问题。首先可以确定,这两个问题都是canvas元素边界有问题,但是从代码上来看是没问题的,因此我就猜测是否和屏幕有关,毕竟canvas某些问题确实和屏幕有关甚至和硬件显卡有关。
devicePixelRatio属性
果然找出一个属性不同: devicePixelRatio;
然后仔细研究了下这个属性的含义,mdn上解释如下:
此属性返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例:即一个CSS像素的大小相对于一个物理像素的大小的比值。
公司的台式机的devicePixelRatio为1,而我自己的电脑为1.25;因为我的电脑是高清屏的,那么什么是高清屏呢?
高清显示屏原理如下:
- 一种具备超高像素密度的液晶屏
- 同样大小的屏幕上显示的像素点由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);
这样我们就得到如下:
我们在创建一个画布,这次我们通过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的宽高的图片,然后通过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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
- canvas绘图问题(记一次高分屏下canvas模糊问题)
- mysql查询很慢怎么回事(MySQL Like模糊查询速度太慢如何解决)
- css 图片边缘虚化(CSS3对图片照片进行边缘模糊处理的实现)
- ASP.NET参数化模糊查询
- nodejs如何识别接口(Node实现搜索框进行模糊查询)
- css3动画效果怎么调(CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集)
- css怎么给背景颜色设置模糊(CSS设置背景图片模糊内容不模糊的解决方法)
- 如何提高织梦dedecms的安全性(详解织梦DedeCMS幻灯片调用图片显示模糊的原因以及解决办法)
- canvas画布多次渲染失败(深入了解canvas在移动端绘制模糊的问题解决)
- sqlserver模糊查询使用定义的字段(SQL Server模糊查询的常见方法总结)
- dataframe模糊匹配合并数据(对DataFrame数据中的重复行,利用groupby累加合并的方法详解)
- mysql模糊匹配语句(MySQL 数据库 like 语句通配符模糊查询小结)
- asp.net 参数化like模糊查询
- canvas宽高技巧(canvas画图被放大且模糊的解决方法)
- mysql模糊查询语句(mysql中like % %模糊查询的实现)
- canvas绘图白屏或者元素有缺失(高清屏中使用Canvas绘图出现模糊的问题及解决方法)
- 冰岛旅游攻略(冰岛旅游攻略及花费)
- 为什么现在年轻人越来越喜欢买衣服(为什么现在年轻人越来越喜欢买衣服穿)
- 怎么做好SEO(怎么做好seo内容优化)
- 冬季钓鱼子线用 长 还是 短(冬季钓鱼子线用)
- 鱼竿 夏钓短,冬钓长 ,一定是这样 认清优缺点在选竿(鱼竿夏钓短冬钓长)
- 鲢鳙钓底还是钓浮 流水的水域应怎样做钓(鲢鳙钓底还是钓浮)
热门推荐
- laravel完成权限验证(laravel实现Auth认证,登录、注册后的页面回跳方法)
- python一分钟认识条件判断(对python判断ip是否可达的实例详解)
- dedecms点赞功能怎么做呢(dedecms实现任意页面调用当前会员信息的方法)
- 详解JS中你不知道的各种循环测速(详解JS中你不知道的各种循环测速)
- html5中table属性(Html5之自定义属性data-,dataset)
- 十问linux虚拟内存(浅谈Linux的虚拟内存)
- 织梦dede怎么获取当前文档的网址(比较详细全面的织梦DEDECMS目录结构说明)
- python实现在同一电脑上tcp通信(Python两台电脑实现TCP通信的方法示例)
- webview上传功能教程(关于webview适配H5上传照片或者视频文件的方法)
- MySQL中TIMESTAMP和DATETIME
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9