解决 canvas 在高清屏中绘制模糊的问题 |
您所在的位置:网站首页 › 网页嵌入app浏览器变模糊 › 解决 canvas 在高清屏中绘制模糊的问题 |
解决 canvas 在高清屏中绘制模糊的问题
解决 canvas 在高清屏中绘制模糊的问题1、问题2、解决思路3、解决问题3.1 首先获取 Canvas 对象:3.2 获取像素比,计算比例3.3 按实际渲染倍率来缩放canvas。3.4 绘制
1、问题
使用 canvas 绘制图片或者是文字在MAC系统中 Retina 屏中显示会非常模糊。如图:
因此,要做 Retina 屏适配,关键是知道当前屏幕的设备像素比,然后将 canvas 放大到该设备像素比来绘制,然后将 canvas 压缩到一倍来展示。 2、解决思路在浏览器的 window 对象中有一个 devicePixelRatio 的属性,该属性表示了屏幕的设备像素比,即用几个(通常是2个)像素点宽度来渲染1个像素。在控制台打印,就能够看到自己屏幕的 devicePixelRatio 值为多少. 我们继续, 举例 🌰 来说,假设 devicePixelRatio 的值为 2 ,一张 100×100 像素大小的图片,在 Retina 屏幕下,会用 2 个像素点的宽度去渲染图片的 1 个像素点,因此该图片在 Retina 屏幕上实际会占据 200×200 像素的空间,但是我们总的像素点只有100×100,这就相当于图片被放大了一倍,因此图片会变得模糊。 类似的,在 canvas context 中也存在一个 backingStorePixelRatio 的属性,该属性的值决定了浏览器在渲染canvas之前会用几个像素来来存储画布信息。 backingStorePixelRatio 属性在各浏览器厂商的获取方式不一样,所以需要加上浏览器前缀来实现兼容。 3、解决问题 3.1 首先获取 Canvas 对象: var myCanvas = document.getElementById("my_canvas"); var context = myCanvas.getContext("2d"); 3.2 获取像素比,计算比例获取像素比,将 Canvas 宽高进行放大,放大比例为:devicePixelRatio / webkitBackingStorePixelRatio , 我们写了一个兼容的方法。注意,这个方法有部分浏览器已经废弃使用了,可以直接默认使用1这个值. var getPixelRatio = function (context) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStore; }; var ratio = getPixelRatio(context); 3.3 按实际渲染倍率来缩放canvas。注意基础知识点: 要设置canvas的画布大小,使用的是 canvas.width 和 canvas.height;要设置画布的实际渲染大小,使用的 style 属性或CSS设置的 width 和height,只是简单的对画布进行缩放。 2倍屏幕下示例代码:canvas的实际大小的640px × 800px,但是实际渲染到页面的大小是320px × 400px,相当于缩小一倍来显示。 那么在3倍屏幕下就是: 因此,要使canvas适配高倍屏,就是要将canvas放大到设备像素比来绘制,最后将canvas压缩成一倍的物理大小来展示。如下: myCanvas.style.width = myCanvas.width + 'px'; myCanvas.style.height = myCanvas.height + 'px'; myCanvas.width = myCanvas.width * ratio; myCanvas.height = myCanvas.height * ratio; 3.4 绘制由于 Canvas 放大后,相应的绘制图片时也要放大,我们可以采用下面的方法进行处理 context.font = "36px Georgia"; //一倍屏下18px字体 context.fillStyle = "#999"; context.fillText("我是清晰的文字", 50*ratio, 50*ratio);// 坐标位置乘以像素比这样就可以解决 canvas 在高清屏中绘制模糊的问题. [参考链接] https://www.jianshu.com/p/2cd5143cf9aa https://github.com/jondavidjohn/hidpi-canvas-polyfill |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |