使用 canvas 画图时图像文字模糊的解决办法

最近在使用 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web项目聚集地

CSS布局解决方案(居中布局)

前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局...

12120
来自专栏pangguoming

CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技...

514100
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之padding

1、padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸;②width非auto,padding影响尺寸;③wi...

32570
来自专栏移动端周边技术扩展

Chat 中 通常录制语音使用,仿微信

21140
来自专栏HTML5学堂

前端特效制作 | CSS3圆形风格面包屑导航

HTML5学堂(码匠):前端开发中,导航栏是一个不可或缺的模块。效果酷炫、制作简单必然是开发者的首选,使用CSS3制作的面包屑导航将是广大开发者的一个绝佳选择。...

68560
来自专栏前端知识分享

第4天:JS入门-给div设置宽高背景色

今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高、背景色。一点点都是进步。核心代码如下:

10910
来自专栏达摩兵的技术空间

固定宽高比例盒模型实现方案

常规布局中,我们经常会遇到百分比布局的方式,也经常会遇到宽度与高度都设置百分比的情况,但高度值我们一般很少用百分比。尤其在百分比布局中,可能很多布局你是宽度百分...

9320
来自专栏小樱的经验随笔

HTML/CSS/JavaScript学习笔记【持续更新】

HTML <font> 标签 定义和用法 <font> 规定文本的字体、字体尺寸、字体颜色。 实例 规定文本字体、大小和颜色: 1 <font size="3"...

377100
来自专栏跟着阿笨一起玩NET

利用vertical-align:middle实现在整个页面居中

如果想让一个div或一张图片相对于整个页面居中,用vertical-align:middle可以很简单地解决。

16810
来自专栏黑白安全

CSS实现毛玻璃透明效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

14730

扫码关注云+社区

领取腾讯云代金券