最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率创建不同尺寸的画布。以下是创建高分辨率画布的代码:

/**
* 创建高分辨率画布
* @param w 画布宽
* @param h 画布高
* @param ratio 屏幕分辨率
*/
function createHiDPICanvas(w, h, ratio?) { const PIXEL_RATIO = (function () {
const c = <HTMLCanvasElement>document.createElement("canvas"),
ctx = c.getContext("2d"),
dpr = window.devicePixelRatio || 1,
bsr = ctx['webkitBackingStorePixelRatio'] ||
ctx['mozBackingStorePixelRatio'] ||
ctx['msBackingStorePixelRatio'] ||
ctx['oBackingStorePixelRatio'] ||
ctx['backingStorePixelRatio'] || 1; return dpr / bsr;
})(); if (!ratio) { ratio = PIXEL_RATIO; }
const can = document.createElement("canvas");
can.width = w * ratio;
can.height = h * ratio;
can.style.width = w + "px";
can.style.height = h + "px";
can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
return can;
} // 不创建高分辨率画布
const canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100; // 创建使用默认分辨率的画布
const myCanvas = this.createHiDPICanvas(100, 100); // 创建分辨率为 3 的画布
const myCustomCanvas = this.createHiDPICanvas(100, 100, 3);

最后,贴一个高分辨率画布的开源库

https://github.com/jondavidjohn/hidpi-canvas-polyfill

使用 canvas 画图时图像文字模糊的解决办法的更多相关文章

  1. Python用PIL将PNG图像合成gif时如果背景为透明时图像出现重影的解决办法

    最近在用PIL合成PNG图像为GIF时,因为需要透明背景,所以就用putpixel的方法替换背景为透明,但是在合成GIF时,图像出现了重影,在网上查找了GIF的相关资料:GIF相关资料 其中有对GIF ...

  2. 爬虫爬数据时,post数据乱码解决办法

    最近在写一个爬虫,目标网站是:http://zx.bjmemc.com.cn/,可能是为了防止被爬取数据,它给自身数据加了密.用谷歌自带的抓包工具也不能捕获到数据.于是下了Fiddler.     F ...

  3. Bootstrap中关闭第二个模态框时出现的问题和解决办法

    Bootstrap中关闭第二个模态框时出现的问题和解决办法 1.关闭第二个模态框时,第一个模态框跟着消失. 解决办法: 第二个模态框的代码不要写在第一个模态框里面,确保两个模态框相对独立; 2.关闭第 ...

  4. oracle执行update语句时卡住问题分析及解决办法

    转载:http://www.jb51.net/article/125754.htm 这篇文章主要介绍了oracle执行update语句时卡住问题分析及解决办法,涉及记录锁等相关知识,具有一定参考价值, ...

  5. 返回xml过长时被nginx截断的解决办法

    返回xml过长时被nginx截断的解决办法 问题描述:通过网页获取数据,数据格式为xml.当xml比较短时,可以正常获取数据.但是xml长度过长时不能正常获取数据,通过观察返回数据的源代码,发现xml ...

  6. 使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行

    使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的 ...

  7. IDEA使用maven构建时控制台中文乱码的解决办法

    使用maven clean install 项目时控制台中文乱码,解决办法如下: Setting->maven->runner VMoptions: -Dfile.encoding=UTF ...

  8. mongodb 更新数据时int32变为double的解决办法 & 教程

    https://www.runoob.com/mongodb/mongodb-mongodump-mongorestore.html mongodb 更新数据时int32变为double的解决办法   ...

  9. java下载文件时文件名出现乱码的解决办法

    转: java下载文件时文件名出现乱码的解决办法 2018年01月12日 15:43:32 橙子橙 阅读数:6249   java下载文件时文件名出现乱码的解决办法: String userAgent ...

随机推荐

  1. SUSE12SP3-Zookeeper安装

    直接使用root账号 1.zookeeper安装 将zookeeper-3.4.13.tar.gz安装包放置指定目录 sudo tar -zxvf zookeeper-3.4.13.tar.gz -C ...

  2. [JLOI2016] 成绩比较

    推石子 首先设\(d[i]=\sum_{t=1}^{U[i]}t^{n-R[i]}(U[i]-t)^{R[i]-1}\),即第\(i\)门课程分数的合法分布方案数: 然后设\(f[i,j]\)表示前\ ...

  3. xpath无法获取值、返回值为[]或者{}的问题解决

    最近用xpath,刚开始有很多问题 用测试代码跑的时候经常获取不到值. 第一种情况: page= etree.parse('text.html') #text.html为一个html文件 <cl ...

  4. 【Netty】(9)---Netty编解码器

    Netty编解码器 在了解Netty编解码之前,先了解Java的编解码: 编码(Encode)称为序列化, 它将对象序列化为字节数组,用于网络传输.数据持久化或者其它用途. 解码(Decode)称为反 ...

  5. [开发技巧]·AdaptivePooling与Max/AvgPooling相互转换

    [开发技巧]·AdaptivePooling与Max/AvgPooling相互转换 个人网站--> http://www.yansongsong.cn/ 1.问题描述 自适应池化Adaptive ...

  6. Asp.Net Core 轻松学-玩转配置文件

    前言     在 .NET Core 项目中,配置文件有着举足轻重的地位:与.NetFramework 不同的是,.NET Core 的配置文件都以 .json 结尾,这表示一个标准的 json 格式 ...

  7. kubectl自动补全

    source <(kubectl completion bash) echo "source <(kubectl completion bash)" >> ...

  8. 贝塞尔曲线控件 for .NET (EN)

    Conmajia 2012 Updated on Feb. 18, 2018 In Photoshop, there is a very powerful feature Curve Adjust, ...

  9. 还在问跨域?本文记录js跨域的多种实现实例

    前言 众所周知,受浏览器同源策略的影响,产生了跨域问题,那么我们应该如何实现跨域呢?本文记录几种跨域的简单实现 前期准备 为了方便测试,我们启动两个服务,10086(就是在这篇博客自动生成的项目,请戳 ...

  10. vue-render函数和插槽

    Vue render函数,官方文档定义绝大部分时候我们使用template 来创建html 模板,但是纯html 和css都基本上都不具有编程能力,而当我们想使用 javascript的编程能力时,我 ...