专栏首页前端新视界使用 canvas 画图时图像文字模糊的解决办法

使用 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 条评论
登录 后参与评论

相关文章

  • 相邻不重复随机数的生成及优化

    生成相邻不重复随机数是之前抽奖插件的遗留问题,在之前的文章中已经简单说过,但没有更好的解决方案。经过一个多月的修改,抽奖插件已经趋于完善,在此分享一下这个问题的...

    叙帝利
  • 如何编写轻量级 CSS 框架

    Github: https://github.com/nzbin/snack Docs:  https://nzbin.github.io/snack 前言...

    叙帝利
  • 展望未来:使用 PostCSS 和 cssnext 书写 CSS

    原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像 Twitte...

    叙帝利
  • 虚拟机安装linux系统无法上网的解决方法

    周末闲来无事,用虚拟机安装了centos6.5系统,安装成功后发现不能连接网络,然后我就一脸蒙蔽了,无奈之下,只能百度查找问题,幸运的是,我还真找到了解决的方法...

    砸漏
  • 各种读入方式速度比较

    以前写过一篇比较scanf与cin的博客,但是那篇博客存在很多bug,测速也很不规范。 今天我收集了一下众大佬的读入优化,来做个比较 特别鸣谢:my,zyh,h...

    attack
  • 在VMware虚拟机软件中安装的Ubuntu虚拟机的窗口不能自动调整大小的解决办法

    在 VMware虚拟机软件 中安装的 Ubuntu虚拟机 的窗口不能自动调整大小的解决办法:

    黑泽君
  • 分布式id生成方案概述

    对于每个标识,都需要有一个命名空间(namespace),来保证其相对唯一性。 分布式的ID生成,以Twitter Snowflake为代表的, Flake 系...

    codecraft
  • 11.11机器学习开源盛宴:来自Google、三星、微软、Princeton的贡献

    用户1737318
  • 在Linux上用Eclipse写C++程序

    我厂很多同学使用VC在windows上编写linux的C/C++程序,然后再传的开发服务器上,然后再编译和调试。如果有修改,可能会直接用vi去改了,然后再把源代...

    韩伟
  • 生物信息学数据库分类概览 (第一版)

    生物与计算机的结合让生物进入大数据时代,为方便管理各种生物数据,科学家们开发了各式各样的生物数据库。了解与自己研究领域相关的数据库,并加以利用可能会使研究工作得...

    生信宝典

扫码关注云+社区

领取腾讯云代金券