技术控

    今日:5| 主题:49136
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] canvas在高倍屏下变模糊的处理办法

[复制链接]
模仿你的呼吸 发表于 2016-10-3 11:46:14
98 4

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
一. 事起缘由

   最近在用Canvas做社区网站的 技能雷达图 ,如下图所示。
  一倍屏下的显示情况:
   
canvas在高倍屏下变模糊的处理办法-1 (社区网站,浏览器,Google,矢量图,华硕)

  二倍屏下的显示情况:

canvas在高倍屏下变模糊的处理办法-2 (社区网站,浏览器,Google,矢量图,华硕)

  正当我很开心的准备发布出去时,用Mac Book 开发的同事跟我说,这简直是糊得不要不要的呀~( ╯□╰ )~。。纳尼可是我的华硕显示十分完美呀,这就十分尴尬了。
  猜想是Canvas毕竟类似于位图,在Retina屏下如果不做多倍屏显示处理的话,图片应该会模糊。Google了一翻,果然如此。
  二. 问题分析

  因为canvas不是矢量图,而是像图片一样是位图模式的。如果不做Retina屏适配的话,例如二倍屏,浏览器就会以2个像素点的宽度来渲染一个像素,该canvas在Retina屏幕下相当于占据了2倍的空间,相当于图片被放大了一倍,因此图片会变模糊。
  因此,要做Retina屏适配,关键是知道当前屏幕的设备像素比,然后将canvas放大到该设备像素比来绘制,然后将canvas压缩到一倍来展示。
  三. 解决办法

  因此,要做Retina屏适配,关键是知道当前canvas的实际渲染倍率,然后将canvas放大到该倍率来绘制,最后将canvas压缩成一倍的物理大小来展示。
  需要注意的是,canvas中的线条大小、文字大小等都需要乘以该倍率来进行绘制。
  3.1 canvas的实际渲染倍率

  在浏览器的window变量中有一个devicePixelRatio的属性,该属性表示了屏幕的设备像素比,即用几个(通常是2个)像素点宽度来渲染1个像素。
  在canvas context中也存在一个 webkitBackingStorePixelRatio 的属性,该属性的值决定了浏览器在渲染canvas之前会用几个像素来来存储画布信息。在iOS6下的safari中的值是2,但是在chrome和iOS7的safari中的值却是1。在iOS6下的safari中,如果有一张100 × 100像素的图片绘制,该图片首先会在内存中生成一张200 × 200的图片,然后再浏览器渲染时会按100 × 100的图片来显示,因此不会出现模糊失真的情况。而在在chrome和iOS7的safari中就会出现模糊。
  但是webkitBackingStorePixelRatio属性在各浏览器厂商的获取方式不一样,所以需要加上浏览器前缀来实现兼容。
  如下:
  [code]var canvas = document.getElementById("canvas"),
        context= canvas.getContext("2d");  

// 屏幕的设备像素比
var devicePixelRatio = window.devicePixelRatio || 1;

// 浏览器在渲染canvas之前存储画布信息的像素比
var backingStoreRatio = context.webkitBackingStorePixelRatio ||
                    context.mozBackingStorePixelRatio ||
                    context.msBackingStorePixelRatio ||
                    context.oBackingStorePixelRatio ||
                    context.backingStorePixelRatio || 1;

// canvas的实际渲染倍率
var ratio = devicePixelRatio / backingStoreRatio;[/code]  3.2 按实际渲染倍率来缩放canvas

  先补充一个基础知识点:
  
       
  • 要设置canvas的画布大小,使用的是 canvas.width 和 canvas.height ;   
  • 要设置画布的实际渲染大小,使用的style或CSS设置的 width 和 height ,只是简单的对画布进行缩放。  
  譬如:
  [code][/code]  canvas的实际大小的640px × 800px,但是实际渲染到页面的大小是320px × 400px,相当于缩小一倍来显示。
  因此,要使canvas适配高倍屏,就是要将canvas放大到设备像素比来绘制,最后将canvas压缩成一倍的物理大小来展示。如下:
  [code]canvas.style.width = canvas.width;
canvas.style.height = canvas.height;

canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;[/code]  3.3 实际渲染效果:

  实际渲染效果如下:
  一倍屏下:

   
canvas在高倍屏下变模糊的处理办法-3 (社区网站,浏览器,Google,矢量图,华硕)

  [code][/code]  二倍屏下:

   
canvas在高倍屏下变模糊的处理办法-4 (社区网站,浏览器,Google,矢量图,华硕)

  [code][/code]  三倍屏下:

   
canvas在高倍屏下变模糊的处理办法-5 (社区网站,浏览器,Google,矢量图,华硕)

  [code][/code]  Perfect!
  3.4 注意事项

  canvas中的线条大小、文字大小等都需要乘以设备像素比来进行绘制,否则高倍屏下的线条会变细几倍。
  四. 应用实例

   该雷达图的实现代码已存放到Github上,地址: https://github.com/dengzhirong/radarChart[attach]26
123下一页
更多图片 小图 大图
组图打开中,请稍候......
友荐云推荐




上一篇:数学中的极限思想求时间复杂度
下一篇:Using types to unit-test in Haskell
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

琴灵 发表于 2016-10-4 03:15:36
在神经的人群里呆久了,我发现我正常了。
回复 支持 反对

使用道具 举报

duniang2222 发表于 2016-10-11 10:55:25
我也是坐沙发的
回复 支持 反对

使用道具 举报

远诺家居 发表于 2016-10-11 11:22:14
围观 围观 沙发在哪里!!!
回复 支持 反对

使用道具 举报

tong000 发表于 2016-10-17 13:31:49
模仿你的呼吸是男的还是女的?
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表