canvas绘图在高清屏显示模糊

最新推荐文章于 2026-02-17 00:33:22 发布
原创 最新推荐文章于 2026-02-17 00:33:22 发布 · 4.8k 阅读 · 0
标签
#retina #canvas #模糊
在Retina屏幕中，canvas元素显示模糊。原因是设备像素比为2，需要正确设置canvas尺寸以保证清晰。解决方案是根据设备像素比调整canvas的width和height属性，以实现高清适配。

问题：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').g
最低0.47元/天 解锁文章
vue实现pdf导出解决生成canvas模糊等问题(推荐)
10-17
最近公司项目需要，利用vue实现pdf导出，从而保存到本地打印出来，说起来好像也很容易，具体要怎么实现呢？下面小编给大家带来了vue实现pdf导出解决生成canvas模糊等问题，需要的朋友参考下吧
pdf.js清晰度提升办法
weixin_55027548的博客
05-25 1万+
项目场景： 需要做一个在线pdf阅读，但是上传的pdf文件预览不清晰，放大之后高糊，所以找一些提升放大后清晰度提升的办法。 问题描述 直接用了开源的pdfjs插件，获取地址都在gitup上 跨域等问题解决后，在手机端点开pdf在线预览，发现跟模拟器上不一样，谷歌模拟器上比较清晰，手机上高糊，放大后看不清，没办法，只能为此努力了。 原因分析： pdf文件上的页面文字太小了，只能在放大的时候重新渲染pdf， 解决方案： 1.优先放大scale的参数，一般把1变为2，如果不够可以继续变大，大部
解决pdfjs预览pdf失真（花屏）问题
weixin_45032067的博客
08-18 7237
解决pdfjs预览花屏失真情况
移动端提高pdf预览清晰度
京东科技开发者
03-29 1914
此时预览的文件已经可以清晰的查看了👏👏👏，但是问题又来了，我们修改的是node_modules的源码，为了不影响其它项目对基础库的依赖，patch-package 提供了一种在不修改源代码的情况下，对模块进行热修补的方法，可以完美解决这个问题；同时，由于补丁文件可以随时创建和修改，因此也可以随时进行热修补，非常方便。通过上述操作，可以发现效果不是很明显，scale越大，pdf中的字体越细，锐度越高，但是清晰度依旧不理想，如果在pc端，展示的位置足够大，可以很大的程度上解决不够清楚的问题。
pdfjs之125%分辨率下不清晰问题
qq_34907249的博客
10-13 2952
pdfjs拿到viewport 后，这个宽高是pdf实际宽高，按照 viewport的宽高来绘制的canvas时，在分辨率为100%时是清晰的，但当电脑分辨率不是100%时比如125%，这时绘制再按照100%的像素进行绘制就会不清晰，这时要获取当前分辨率，来计算实际要绘制的画布大小。要点：画布实际大小和要显示的大小是两个概念，显示的宽高是通过 style 设置的。
cropper左右移动_移动端cropper.js上传图片、裁剪
weixin_32784349的博客
02-15 344
先引入CSS结构部分 data-option="{ "width": 200, "height": 180}" >确认取消JSvar fileImg = "";$(function () {$(".imgCutConfirm").bind("click", function () {$(".containerDiv").hide();$(".imgEdit").hi...
解决 canvas 在高清屏中绘制模糊的问题
suwu150
07-30 1万+
我们继续,举例来说，假设 devicePixelRatio 的值为 2 ，一张 100×100 像素大小的图片，在 Retina 屏幕下，会用 2 个像素点的宽度去渲染图片的 1 个像素点，因此该图片在 Retina 屏幕上实际会占据 200×200 像素的空间，但是我们总的像素点只有100×100,这就相当于图片被放大了一倍，因此图片会变得模糊。因此，要做 Retina 屏适配，关键是知道当前屏幕的设备像素比，然后将 canvas 放大到该设备像素比来绘制，然后将 canvas 压缩到一倍来展示。
高清屏canvas会模糊与代码实现方案
weixin_30980795的博客
07-17 384
理清楚模糊的根本原因与代码实现方案为什么高清屏canvas会模糊高清屏模糊的产生原因前端开发要怎么避免这种情况发生呢什么是物理像素和逻辑像素在普通屏幕下， canvas 和 css 大小一样就不会模糊但是换了高清屏就算canvas 和 css 大小一样还是会模糊前端开发要怎么避免这种情况发生呢什么是物理像素和逻辑像素1.canvas画布，canvas上的1px就是屏幕的1px，既物理像素； 2.canvas长宽样式，既逻辑像素； 3.高清屏幕和普通屏幕，既设备像素比 4.scale() 方法： 默认情况下，
高清屏下canvas重置尺寸引发的问题
netcy的专栏
10-13 1488
我们知道，清空canvas画布内容有以下两个方法。第一种方法是cearRect函数： context.cearRect(0,0,canvas.width,canvas.height) 第二种方法就是用原值重新设置一下canvas的宽（或者高） canvas.width = canvas.width // or canvas.height = canvas.height 第二种方法可以起作用，...
html canvas 模糊,解决 canvas 在高清屏中绘制模糊的问题
weixin_42362931的博客
06-05 2500
使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊。如图：因为 canvas 不是矢量图，而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该 canvas 在 Retina 屏幕下相当于占据了2倍的空间，相当于图片被放大了一倍，因此绘制出来的图片文字等会变模糊。因此，要做 Retina 屏...
解决小程序canvas高清屏模糊问题
loney_man的博客
08-23 5396
原因 因为 canvas 不是矢量图，而是像图片一样属于位图。高 dpi 显示设备意味着每平方英寸有更多的像素，比如说二倍屏，手机就会以2个像素点的宽度来渲染一个像素，该 canvas 在屏幕中相当于占据了2倍的空间，相当于绘制的元素被放大了一倍，因此绘制出来的图片文字等会变模糊。 解决方案思路 首先要明确一点，canvas分为画布尺寸和渲染尺寸。渲染尺寸就是在css样式文件里设置的width、height大小，而画布尺寸则是在canvas标签里设置的width和height，比如< canvas i
canvas 生成图片模糊
qzo_smile的博客
05-17 5165
参考文件： https://blog.csdn.net/qq_41887214/article/details/123173072 https://juejin.cn/post/6844903828916011022 https://www.jb51.net/html5/815034.html 在解决这个问题之前，必须了解以下背景知识： 1.关于屏幕的一些基础知识： 物理像素（DP） 物理像素也称设备像素，我们常听到的手机的分辨率及为物理像素，比如 iPhone 7的物理分辨率为750 * 1334。屏
Canvas 在高清屏下绘制图片变模糊的解决方法
热门推荐
qyaroon的博客
07-15 2万+
问题： 用canvas绘制图片的时候会模糊，但是用img显示的时候就不会，canvas和img的大小是相同的  至于为什么会变模糊，这和浏览器处理 canvas 的方式有关，相关的文章可以参考这篇 High DPI Canvas，这里不作深入介绍。 下面是相关的代码： function init() { var canvas = do
解决 canvas 绘图在高清屏中的模糊问题
xuan2717的博客
04-20 121
解决 canvas 绘图在高清屏中的模糊问题
canvas 实现图片局部模糊_Canvas 在高清屏下绘制图片变模糊的解决方法
weixin_32073865的博客
01-12 397
前提条件假设我们要在 canvas 中绘制一张 300 x 90 的图片，并且要保证它在高清屏中不模糊。那么我们首先要准备一张 600 x 180的图片，处理过高清屏的同学应该会有这方面的经验。问题重现OK，我们先把问题重现一下，以便有一个更直观的了解。下面是相关的代码：function init() {var canvas = document.querySelector('canvas');v...
canvas生成图片模糊的解决方案
Bright2017的博客
07-29 4321
一般情况，在高清屏的设备下，任何绘制canvas中的图像、文字、线条、形状都可能会出现模糊的问题。可通过引入 GitHub 中的 hidpi-canvas 有效地解决。 首先去 GitHub 下载 hidpi-canvas.js 文件：传送门； 在项目中引入 hidpi-canvas.js 文件； 调用 getPixelRatio( ) 函数，得到 ratio 值； 在 drawImage( ) 中，将 width 和 height 乘以 ratio； 效果如下，但抱歉，没做对比图！ 在部分 iO
canvas 边界模糊_关于canvas绘制模糊问题的解决方法
weixin_39694838的博客
01-17 399
模糊原因首先，需要理解canvas的展示机制。我绘制了一张375px的canvas，iphone6的宽度也是375px，ok，canvas铺满了整个屏幕。那么canvas的大小就是375px，canvas类似于图片，一张375px的图片，我们就把它当做是图片来看就好了。我，尖沙咀段坤说的。如果遇到了屏幕宽度400px的手机，那么图片会 拉伸，canvas也会拉伸，拉伸则必然会模糊。那么iphone...
微信小程序Canvas绘图优化：从模糊到高清的完整指南
最新发布
weixin_29008055的博客
02-17 367
本文深入剖析了微信小程序Canvas绘图模糊的根本原因，即设备像素比（DPR）与画布分辨率不匹配。文章提供了从基础适配到高级场景（如高清图片绘制与导出）的完整优化方案，并分享了可复用的工具函数与性能优化技巧，帮助开发者彻底解决画布不清晰的问题，生成高清视觉内容。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值