canvas绘图在高清屏显示模糊

问题：canvas在高清屏显示模糊

前几天在做PDF预览时（使用mozilla的pdf.js），发现PDF文字在canvas中显示非常模糊，在网上搜出来的中文结果都没有这方面相关的，后面用英文搜索到了原因，因为我测试用的是retina屏。立即用普通显示器上试了一下，表现果然是正常的。

分析

设备像素比 = 物理像素 / 设备独立像素dip
canvas元素依赖于设备像素比，在retina屏中设备像素比是2，意味着宽度为100px的canvas，需要200px的填充才会清晰地显示。

解决方法

既然是高清屏的原因，那么只要对高清屏做下适配就OK啦。

代码

pdf.js的解决方案详见 https://github.com/lwenn/pdf-viewer-easy

// 获取设备像素比
var PIXEL_RATIO = (function () {var ctx = document.createElement('canvas').getContext('2d'),dpr = window.devicePixelRatio || 1,bsr = ctx.webkitBackingStorePixelRatio ||ctx.mozBackingStorePixelRatio ||ctx.msBackingStorePixelRatio ||ctx.oBackingStorePixelRatio ||ctx.backingStorePixelRatio || 1;return dpr / bsr;
})();var canvasWidth = 1000,canvasHeight = 500;
// 适配高清屏，canvas内容的宽高是实际的宽高的PIXEL_RATIO倍
canvas.width = canvasWidth * PIXEL_RATIO;
canvas.height = canvasHeight * PIXEL_RATIO;
canvas.style.width = canvasWidth + 'px';
canvas.style.height = canvasHeight + 'px';
// 缩放绘图
context.setTransform(PIXEL_RATIO, 0, 0, PIXEL_RATIO, 0, 0);

canvas绘图在高清屏显示模糊相关推荐

高清屏概念解析与检测设备像素比的方法
前言做移动端h5开发很久了,从开始入行到现在.很多知识和工具都是在用前辈留下的遗产,都没有深入的研究过原因,了解为什么要这么去做. 也许自己也是过了交给自己做什么就做什么的阶段了.在国庆节有一个大块 ...
emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题
场景解决在移动端拍照,用 canvas 绘图出现图片逆时针旋转 90 度的问题. canvas 在高清屏与retina屏下绘图模糊的问题. 如下图: 就用我老婆来做模特了~ 下图是拍照过后渲染在画布 ...
emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题 1
场景解决在移动端拍照,用 canvas 绘图出现图片逆时针旋转 90 度的问题. canvas 在高清屏与retina屏下绘图模糊的问题. 如下图: 就用我老婆来做模特了~ 下图是拍照过后渲染在画布 ...
掌财社:怎么解决Canvas绘图出现模糊问题？在高清屏解决方法解析！
我们在使用高清屏进行工作或者娱乐的时候都会看起来比较舒适,那么大家知道吗?屏幕的一个物理像素就是css所定义的一个逻辑像素.所以下面我们来介绍有关于"怎么解决Canvas绘图出现模糊问题?& ...
canvas 实现图片局部模糊_Canvas 在高清屏下绘制图片变模糊的解决方法
前提条件假设我们要在 canvas 中绘制一张 300 x 90 的图片,并且要保证它在高清屏中不模糊.那么我们首先要准备一张 600 x 180的图片,处理过高清屏的同学应该会有这方面的经验. 问 ...
解决小程序canvas高清屏模糊问题
原因因为 canvas 不是矢量图,而是像图片一样属于位图.高 dpi 显示设备意味着每平方英寸有更多的像素,比如说二倍屏,手机就会以2个像素点的宽度来渲染一个像素,该 canvas 在屏幕中相当于 ...
【转】解决 canvas 在高清屏中绘制模糊的问题
[转]解决 canvas 在高清屏中绘制模糊的问题参考文章: (1)[转]解决 canvas 在高清屏中绘制模糊的问题 (2)https://www.cnblogs.com/lanshengzhon ...
华硕U303LA换屏记--普通屏换成高清屏1920x1080
因为工作需要, 要经常用到手提电脑, 华硕U303LA原来的屏是普通屏. 长时间看时, 看得我眼晴很不舒服. 普通屏都是偏灰色的. 不适宜长时间观看. 我就在网上对比了几天, 去深圳华强北的笔记本屏 ...
极致视觉追求六款热门高清屏笔记本推荐
现在的手机屏幕越大越受欢迎,而平板屏幕似乎越小越受欢迎,很明显,人们在喜欢大屏震撼视觉的同时,也希望其可以有着很好地便携性.而如果将这个概念折合到笔记本中,就是要选一款有着良好便捷性的大屏幕笔记本. ...

canvas绘图在高清屏显示模糊

问题：canvas在高清屏显示模糊

分析

解决方法

代码

canvas绘图在高清屏显示模糊相关推荐

最新文章

热门文章